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
Bardziej dopracowana wersja klasycznego akordeonu jQuery. Ten typ slajder'ów bazuje na przeglądaniu treści za pomocą zakładek.
2. FlexSlider
Użyteczny, responsywny i dobrze udokumentowany przedstawiciel gatunku slajderów.
3. Nivo Slider
Slider ze zróżnicowanymi efektami przejścia pomiędzy obrazami. Wersja "czysta" bezpłatna, jako plugin WordPress niestety już z opłatą.
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.
5. timelinr
Animowana przeglądarka treści ułożonej wg. skali czasu.
Podświetlanie treści - lightbox'y
6. 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.
7. Popeye
Alternatywa dla lightbox doskonale sprawdzająca się jako wygodna przeglądarka ilustracji dołączonych do dłuższych tekstów.
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).
9. TopUp
TopUp łączy możliwości YoxView z Popeye. Animowane okna starają się naśladować look'n'feel produktów apple.
10. jRumble
Efekt trzęsienia (a może rozedrgania?). Przyciąga uwagę gdy jest zastosowany do poruszania elementem po najechaniu wskaźnikiem myszy.
Układ treści - layout'y
11. 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.
12. Isotope
Efekt podobny do Masonry ale pozwala na więcej, np. na różne modele layout'ów filtrowanie i sortowanie.
13. Quicksand
Animacja sortowania i filtrowania elementów (ładowanych również za pomocą Ajax).
14. Arpor
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.
15. FitText
Wielkie, banerowe i przede wszystkim responsywne napisy. Animacji jest tu niewiele ale główny cel to wyświetlanie dopasowanych do ekranu napisów.
Wyświetlanie treści w galerii
16. 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.
17. 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.
18. DiagonalFade
Animacja w sam raz na witrynę sklepową - odkrywa kolekcję obrazków.
19. Thumbnails Navigation Gallery
Galeria zdjęć w pełnym oknie przeglądarki plus efekt maski oraz nawigacja a'la menu.
20. Supersized
Dopracowana galeria wyświetlana w pełnym oknie przeglądarki z trzema efektami przejścia pomiędzy obrazami i konfigurowalną nawigacją.