20 przydatnych animacji jQuery

Po serii poważniejszych wpisów dla urzędników pora na czystą przyjemność: front-end. Poniżej zgromadziłem 20 najciekawszych, moim zdaniem, animacji do zastosowania na dowolnej stronie www.

Animacje łączą dwie cechy: bazują na zdobywającym ogromną popularność rozszerzeniu/bibliotece java script: jQuery i służą do efektownego prezentowania treści.

Kto do tej pory nie miał styczności z jQuery, a chciałby zamieścić na swojej stronie animacje odsyłam do ogólnej instrukcji. Na każdej ze stron domowych niżej wylistowanych dodatków można znaleźć instrukcję jak zainstalować i skonfigurować efekt.

Nie ma tutaj wyjaśnień dlaczego jQuery jest lekki, szybki i popularny. Jest za to lista bezpłatnych pluginów; w niektórych przypadkach twórcy oferują też płatne, rozszerzone wersje, np. jako plugin do Jomml'i lub Wordpress'a.

Przewijanie treści - slider'y

1. liteAccordion

liteAccordion

Bardziej dopracowana wersja klasycznego akordeonu jQuery. Ten typ slajder'ów bazuje na przeglądaniu treści za pomocą zakładek.

instrukcja i demo

demo 2

2. FlexSlider

FlexSlider

Użyteczny, responsywny i dobrze udokumentowany przedstawiciel gatunku slajderów.

instrukcja i demo

demo

3. Nivo Slider

NivoSlider

Slider ze zróżnicowanymi efektami przejścia pomiędzy obrazami. Wersja "czysta" bezpłatna, jako plugin WordPress niestety już z opłatą.

demo 1

demo 2

instrukcja

    4. InfoGrid

    Treść w układzie tabeli (choć faktycznie w HTML obecne są tu bloki kolumn i listy) z animowanym efektem powiększenia wskazanej komórki tabeli.

    demo

    instrukcja

    5. timelinr

    timelinr

    Animowana przeglądarka treści ułożonej wg. skali czasu.

    demo 1

    demo 2

    instrukcja

    Podświetlanie treści - lightbox'y

    6. Fancybox

    Fancybox

    Klasyka wśród lightbox'ów. Od pewnego czasu dostępna jest napisana na nowo wersja Fancybox 2, niestety płatna dla zastosowań komercyjnych.

    demo

    instrukcja

    7. Popeye

    Alternatywa dla lightbox doskonale sprawdzająca się jako wygodna przeglądarka ilustracji dołączonych do dłuższych tekstów.

    demo

    instrukcja

    8. YoxView

    Kolejna wariacja lightbox. Dodatkowe efekty przejścia pomiędzy zdjęciami, skalowanie, wyświetlanie podpisów, różnego typu treść (falsh, wideo, inne strony w iframe).

    demo

    instrukcja

    9. TopUp

    TopUp łączy możliwości YoxView z Popeye. Animowane okna starają się naśladować look'n'feel produktów apple.

    demo 1

    demo 2

    instrukcja

    10. jRumble

    Efekt trzęsienia (a może rozedrgania?). Przyciąga uwagę gdy jest zastosowany do poruszania elementem po najechaniu wskaźnikiem myszy.

    demo i instrukcja

    Układ treści - layout'y

    11. Masonry

    Masonry

    Wtyczka jQuery realizująca automatyczne zmiany layout'u. Działa w sposób odwrotny do CSS float: Masonry ustawia elementy na stronie w pierwszej kolejności wg. porządku wertykalnego, później horyzontalnie minimalizując pustą przestrzeń wynikającą z różnicy rozmiarów elementów. Twórczo zastosowany robi wrażenie na gościach strony. Layout po zaimplementowaniu Masonry upodabnia stronę do portalu Printerest.

    demo i instrukcja

    zastosowanie 1

    zastosowanie 2

    zastosowanie 3

    12. Isotope

    Isotope

    Efekt podobny do Masonry ale pozwala na więcej, np. na różne modele layout'ów filtrowanie i sortowanie.

    demo i instukcja

    zastosowanie 1

    zastosowanie 2

    13. Quicksand

    Quicksand

    Animacja sortowania i filtrowania elementów (ładowanych również za pomocą Ajax).

    demo 1

    demo 2

    demo 3

    instrukcja

    14. Arpor

    Arbor

    Arbor to biblioteka służąca do wizualizacji grafów. Zawiera algorytm układający wierzchołki i pozwala na ich przeciąganie pozwalając webmaster'owi skupić się na samej zawartości grafu i stronie graficznej.

    demo 1

    demo 2

    demo 3

    demo i instukcja

    15. FitText

    FitText

    Wielkie, banerowe i przede wszystkim responsywne napisy. Animacji jest tu niewiele ale główny cel to wyświetlanie dopasowanych do ekranu napisów.

    demo

    Wyświetlanie treści w galerii

    16. 3D Cloud Carousel

    3D Cloud Carousel

    Efektowne przeglądanie obrazków ułożonych "w karuzeli". Efekt głębi, automatyczne refleksy i obsługa myszy sprawiają wrażenie, jakby animacja była wykonana we Flash.

    demo i instrukcja

    17. ImageLens

    ImageLens

    Efekt szkła powiększającego. Przydatny gdy potrzeba zwrócić uwagę gościa strony na szczegóły produktu. Technika prezentacji często spotykana w sklepach internetowych.

    demo

    instrukcja

    18. DiagonalFade

    DiagonalFade

    Animacja w sam raz na witrynę sklepową - odkrywa kolekcję obrazków.

    instrukcja i demo

    19. Thumbnails Navigation Gallery

    Thumbnails Navigation Gallery

    Galeria zdjęć w pełnym oknie przeglądarki plus efekt maski oraz nawigacja a'la menu.

    demo

    instrukcja

    20. Supersized

    supersized

    Dopracowana galeria wyświetlana w pełnym oknie przeglądarki z trzema efektami przejścia pomiędzy obrazami i konfigurowalną nawigacją.

    strona domowa

    demo 1


    blog comments powered by Disqus