Wydajniejsze pokazy slajdów dzięki CSS3

rotat9r

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).

Komentarze 265:

  • » Marcin: 23.04.2013 o 17:07

    Właśnie dziwi mnie gdy jest wykorzystywane JS przy efektach, które bez problemu można uzyskać w CSS 3 ;)

    "// 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)."

    Czekam na premierę... ;)

  • » Adriano: 23.04.2013 o 17:20

    Właśnie dziwi mnie gdy jest wykorzystywane JS przy efektach, które bez problemu można uzyskać w CSS 3 ;)

    Głównie wynika to z niewiedzy. Jest gotowa popularna wtyczka to ludzie jej używają nie szukając nowszych alternatyw.
    Wtyczki mają mają być proste w użyciu - "tutaj zmieniam nazwę i już mam inny efekt", itd.
    rotat9r to też JS, ale to co najbardziej wpływa na wydajność działa w oparciu o CSS3 więc to wystarczy aby poczuć różnicę.

    Dałoby się całkowicie wyrzucić JS, ale wówczas możliwość swobodnej konfiguracji dla laików byłaby znacznie utrudniona :)

  • » Marcin: 24.04.2013 o 18:29

    Dałoby się całkowicie wyrzucić JS, ale wówczas możliwość swobodnej konfiguracji dla laików byłaby znacznie utrudniona :)

    A myślałem, że to ja jestem laikiem ;)

  • » Kamil: 18.12.2014 o 10:48

    CSS3 wprowadził wiele fajnych zmian dzięki którym w połączeniu z HTML5 można tworzyć naprawdę efektowne rzeczy na stronach :)

  • » Kamil: 02.02.2015 o 14:12

    CSS3 wprowadza całkiem sporo takich innowacyjnych rozwiązań :)

Dodaj komentarz:

Dostępne tagi: [link]http://adres-www[/link] [quote]cytat[/quote] [code]kod[/code] [pre]tekst preformowany[/pre] [b]bold[/b]