Wydajniejsze pokazy slajdów dzięki CSS3

Na wielu stronach można znaleźć animowane pokazy slajdów (obrazy, teksty, itd) - jednak ciągle są wykorzystywane stare skrypty które używają animacji JavaScript zamiast bardziej wydajnych animacji CSS3.

Popularną wtyczką jest jQuery Cycle - to rozwiązanie niby idealne bo proste. Ale już nie dzisiaj...
Obsługa CSS3 jest już tak powszechna, że należy już bezwzględnie zapomnieć o ciężkich rotatorach.

Alternatywą jest rotat9r działający w oparciu o JS, ale gdzie główną siłą napędową jest właśnie CSS3.

Dlaczego piszę o tym rozwiązaniu?

Tak się złożyło że Krzysiek (Procek) napisał tę wtyczkę do jQuery i mogłem być jednym z pierwszych testujących :)

Coś więcej o tym rozwiązaniu?

Najlepiej jak zacytuję opis Krzyśka - przynajmniej niczego nie pomieszam :)

Najpopularniejsza wtyczka do tworzenia animowanych pokazów slajdów: "Cycle jQuery Plugin" ma wreszcie nowoczesną alternatywę. Wtyczka rotat9r (rotat9r.desi9n.pl) działa w oparciu o animacje CSS3 co daje znacznie lepsze wydajnościowo wyniki od pierwowzoru. Niezależnie od przeglądarki animacje są płynne i szybkie.

Szczególnie istotny jest fakt pełnej funkcjonalności na urządzeniach mobilnych niezależnie od systemu. Wszystkie popularne systemy (Android, iOS, Blackberry, Windows Phone) wspierają efekty, których dostarcza rotat9r.

Istotnym faktem jest to, że składnia użycia wtyczki rotat9r jest IDENTYCZNA jak w przypadku wtyczki cycle co daje możliwość podmiany biblioteki w naszym kodzie bez żadnych dodatkowych modyfikacji. Wtyczka rotat9r obsługuje większość opcji pierwowzoru, a poza tym wyposażona jest w kilka nowych efektów przejść, których ciągle przybywa.

Wtyczka rotat9r wymaga jQuery w wersji 1.9 ze względu na korzystanie z nowych elementów rdzenia jQuery. Wtyczka jest dystrybuowana w pełni za darmo, nawet do użytku komercyjnego.

Moje testy

Przeglądarki desktopowe: zarówno 'cycle' jak i 'rotat9r' spisują się dobrze. Jednak po obciążeniu procesora widać że 'rotat9r' zdecydowanie wygrywa. Ale nie ma się czemu dziwić - animacje CSS3 muszą być mniej zasobożerne.

Różnice są o wiele lepiej widoczne na urządzeniach mobilnych.
HTC Desire Z: 'cycle' z płynną animacją raczej nie ma nic wspólnego, w przeciwieństwie do 'rotat9ra'. Na iPhone 'cycle' radzi sobie dobrze, ale 'rotat9r' to już całkowita płynność.

Tak więc rotat9r swobodnie może być stosowany - nie będzie z nim problemu nawet na słabszych smartfonach.

Już zdążyłem go zastosować w kilku realizacjach i nie zauważyłem żadnych problemów z działaniem. Wdrożenie jest szybkie, a efekt taki jak ma być :)

// info dodatkowe: dawno nie pisałem na blogu, ale już jestem w trakcie migracji na WordPressa - pozostało mi tylko dokończyć szablon (oczywiście z RWD).