GoldenLine
Zaloguj się
Marcin Kapusta

Marcin Kapusta iOS
Developer/Software
Developer/Music
Producer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Witajcie.

Nie wiem jak po angielsku się nazywa taki efekt, a tym bardziej po polsku więc zamieszczam animowanego gifa. Chciałbym, żeby można było zmieniać tak kolory kolejnych elementów ("divów"), żeby uzyskać taki właśnie efekt.


Obrazek


Najlepiej, żeby było to konfigurowalne (szybkość, kierunek, zapętlenie).

Jak ktoś wie jak taki plugin wyszukać albo ma prosty pomysł jak to napisać, żeby pracowało bardzo wydajnie w jQuery byłbym bardzo wdzięczny.
Link do wypowiedziLink

konto usunięte

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Ale co dokładnie potrzebujesz ?
Chcesz, żeby ktoś to za Ciebie napisał ? ;)
Link do wypowiedziLink
Marcin Kapusta

Marcin Kapusta iOS
Developer/Software
Developer/Music
Producer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Oskar Wróbel:
Ale co dokładnie potrzebujesz ?
Chcesz, żeby ktoś to za Ciebie napisał ? ;)

Nie... Potrzebuje fachowej nazwy jak taki efekt się nazywa bo nie wiem jak wyszukać pomysłu w sieci jak to napisać. Umiem pisać pluginy do jQuery, ale jak zaanimować tyle małych elementów (div'ów) i zsynchronizować je to nie mam za bardzo pomysłu. Udało mi się uruchomić animację na każdym z nich, ale z kolei na końcu mam problem z wykryciem, czy już wszystkie zakończyły animację by ruszyć w drugą - powrotną stronę.
Link do wypowiedziLink
Bartłomiej Jończy

Bartłomiej Jończy iOS / Java EE
Developer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Knight Rider car effect :-)
Link do wypowiedziLink
Bartłomiej Jończy

Bartłomiej Jończy iOS / Java EE
Developer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Btw. Ja bym zrobił na callbackach w animate (jak zmieni jeden, to rusza następny, rekurencyjnie np. inkrementując licznik jakiś, a jak dojdzie do końca, to w drugą i dekrementować)
Link do wypowiedziLink

konto usunięte

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Bartłomiej Jończy:
Knight Rider car effect :-)

"Michael Knight, a lone crusader in a dangerous world. The world... of the Knight Rider." :D
Link do wypowiedziLink
Dariusz Sikorski

Dariusz Sikorski Front-End Web
Developer, Ux/Ui
Designer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Hej, podrzucam słowny opis algorytmu, który możesz przygotować:

1. przygotuj sobie tablicę ze wskaźnikami (selektorami) na kolejne kostki (divy) animacji:
[".box1",".box2",".box3",".box4"... ".box3", ".box2", ".box1"]

2. w momencie rozpoczęcia animacji wywołaj pętlę foreach(){} przez powyższą tablicę.

3. Przy każdym "okrążeniu" (iteracji) pętli przypisz zmianę właściwości box-shadow "box"owi z obecnej pętli, oraz usuń box-shadow "box"owi z poprzedniej pętli [i-1]("box"y to twoje kolejne lampki-divy).

4. pętla dla wszystkich obiektów zdąży wykonać się w ułamkach sekundy, więc przed każdym kolejnym zaświecenia box'a przez .animate() przypisuj coraz dłuższe opóźnienie .delay().

rosnące opóźnienia łatwo otrzymasz mnożąc: numer pętli przez dowolny mnożnik milisekund, np.: .delay( i*250 ), gdzie i - to numer pętli.

5. przy zakończeniu .animate() na ostatniej lampce w tablicy: dorzuć funkcję zwrotną (callback) do ponownego wykonania całej pętli, dlatego aby pętla mogła wywołać samą siebie musi wcześniej zostać zamknięta w funkcji. Powinieneś w ten sposób otrzymać ładną rekurencję.

*Oczywiście po każdym wygaszeniu kolejnej lampki sprawdzaj czy cała animacja jest jeszcze potrzebna i nie musi zostać przerwana.

Powodzenia :)
Link do wypowiedziLink
Dariusz Sikorski

Dariusz Sikorski Front-End Web
Developer, Ux/Ui
Designer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Przyszło mi do głowy jeszcze jedno rozwiązanie:

Nie wiem, czy przestarzały znacznik marquee jest jeszcze zgodny ze standardami w3c (np. w html5) i wspierany przez urządzenia mobilne, ale jeśli tak, to możesz umieścić swoją świecącą diodę jako ruchomy div / img, oraz zasymulować wygaszone diody przez wstawienie tła pod animacją, przez np:

background-image: url("./led-off") repeat-x;
Link do wypowiedziLink

konto usunięte

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Wspominałeś coś o wydajności i urządzeniach mobilnych.

Może samą animację warto oddać w ręce CSS-a:
- w nowoczesnych przeglądarkach masz supcio efekt
- w starszych brakuje tylko płynnych przejść animacji
- w mobilnych zależy bo niektóre potrafią już cuda wyprawiać, ale w wersji podstawowej będzie działać zawsze

A wspólnym mianownikiem powyższych punktów będzie lepsza wydajność.

I standardowo szybki przykładzik:
http://rkrupinski.home.pl/_test/david_hasselhoff/
Link do wypowiedziLink
Marcin Kapusta

Marcin Kapusta iOS
Developer/Software
Developer/Music
Producer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Dariusz Sikorski:
4. pętla dla wszystkich obiektów zdąży wykonać się w ułamkach sekundy, więc przed każdym kolejnym zaświecenia box'a przez .animate() przypisuj coraz dłuższe opóźnienie .delay().

Rzeczywiście w jQuery 1.4 jest funkcja delay(), która opóźnia wykonywanie callbacków w kolejce elementu. :)
5. przy zakończeniu .animate() na ostatniej lampce w tablicy: dorzuć funkcję zwrotną (callback) do ponownego wykonania całej pętli, dlatego aby pętla mogła wywołać samą siebie musi wcześniej zostać zamknięta w funkcji. Powinieneś w ten sposób otrzymać ładną rekurencję.

No i właśnie nie wiedziałem jak to zrobić. Jak wykryć, że ostatni element skończył się animować, żeby zacząć animować w drugą stronę. Teraz wiem, że w animate można zdefiniować funkcję, która się wykona po ukończeniu animacji. :)
*Oczywiście po każdym wygaszeniu kolejnej lampki sprawdzaj czy cała animacja jest jeszcze potrzebna i nie musi zostać przerwana.

Tego za bardzo nie rozumiem, ale przydała by się funkcja, która anuluje każdą animację. Ktoś wie jak takową zrobić?
Powodzenia :)

Dzięki! W końcu co dwie głowy to nie jedna.
Oto co wyszło. Na razie nie ma żadnej konfiguracji bo to prototyp. Tworzycie diva i upychacie do niego inne divy, które będą animowane jeden po drugim w kolejności w jakiej występują. Do ostatniej diody zamieszczam callback, który uruchomi cala animacje od nowa z odwróconą kolejnością elementów. Trzeba ponadto dodać funkcję reverse do jQuery ponieważ tablice tworzone przez jQuery są tylko pseudo tablicami, które tej metody nie mają.



(function($) {

  $.fn.reverse = Array.prototype.reverse;



  $.fn.knightRider = function() {

    return this.each(function() {

      var el = $(this);

      var diody = el.children();

      $.fn.knightRider.animate(diody);

    });

  };

  

  $.fn.knightRider.animate = function(diody) {

    var iloscDiod = diody.length-1; // ilosc diod bez ostatniej

    var i=0;

    for (i=0; i<iloscDiod; i++) {

      var dioda = $(diody[i]);

      dioda.delay(i*20).animate({opacity:1.0},{duration:500}).animate({opacity:0.2},{duration:500});

    }

    var dioda = $(diody[i]); // ostatnia dioda

    dioda.delay(i*20).animate({opacity:1.0},{duration:500}).animate({opacity:0.2},{duration:500, complete:function() {

      $.fn.knightRider.animate(diody.reverse());

    }});

  };

})(jQuery);

jQuery('.container').knightRider();
Marcin Kapusta edytował(a) ten post dnia 18.05.11 o godzinie 09:26
Link do wypowiedziLink

konto usunięte

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

rafał krupiński:
Wspominałeś coś o wydajności i urządzeniach mobilnych.

Może samą animację warto oddać w ręce CSS-a:
- w nowoczesnych przeglądarkach masz supcio efekt
- w starszych brakuje tylko płynnych przejść animacji
- w mobilnych zależy bo niektóre potrafią już cuda wyprawiać, ale w wersji podstawowej będzie działać zawsze

A wspólnym mianownikiem powyższych punktów będzie lepsza wydajność.

I standardowo szybki przykładzik:
http://rkrupinski.home.pl/_test/david_hasselhoff/

A przy okazji: http://www.quirksmode.org/dom/classchange.html
Link do wypowiedziLink
Marcin Kapusta

Marcin Kapusta iOS
Developer/Software
Developer/Music
Producer

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

Hej. Super rozwiązanie.
Gdybym wiedział, że takie cuda da się robić w CSS pewnie bym poszedł w tym kierunku.

Gdzie mogę znaleźć więcej info na temat tworzenia efektów w samym css... Widzę, że stosujesz coś takiego:

-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

Czy to chodzi o to, że jak zmieniasz tło np. background-color na inny to wykorzystywane są te style powyżej do płynnego przejścia?
Link do wypowiedziLink

konto usunięte

Temat: Potrzebny mi w jQuery efekt taki jak na zamieszczonym...

webkit: http://www.webkit.org/blog/138/css-animation/
presto: http://www.opera.com/docs/specs/presto23/css/transitions/
mozilla: https://developer.mozilla.org/en/CSS/CSS_transitions
draft na w3c: http://www.w3.org/TR/css3-transitions/
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Gdzie znaleźć taki efekt




Wyślij zaproszenie do
Anuluj