W ostatnim zestawieniu inspirujących stron internetowych mogliście zobaczyć jak dobrze dobrana animacja sprawia, że strona nabiera charakteru i staje się bardziej interesująca. Jeśli chcecie coś takiego osiągnąć, potrzebujecie wyjątkowo zręcznego programisty, albo… kilku skryptów, które większość pracy wykonają za niego. Poniżej znajdziecie 9 ciekawych rozszerzeń do jQuery.

Parallax ImageScroll

Każdemu, kto odwiedził stronę Spotify, z pewnością spodobał się sposób, w jaki przewijane są tam obrazki oddzielające poszczególne sekcje strony. Dzięki tej wtyczce osiągnięcie takiego efektu jest banalnie proste. Wtyczka wyposażona jest w opcje, które umożliwiając wyłączenie efektu na telefonach urządzeniach przenośnych, na których przesuwanie dużych obrazków nazbyt obciąża procesor. Całość świetnie wygląda w każdej rozdzielczości.

Parallax-ImageScroll

Demo Pobierz

jQuery.panelSnap

Dzięki panelSnap stworzymy stronę wyglądającą trochę jak pokaz slajdów. Wtyczka dostosuje wymiar każdej z sekcji strony do wymiarów okna przeglądarki, a następnie sprawi, by po zakończeniu przewijania strony zawsze widoczny był cały „slajd”. Wtyczka doskonale działa na urządzeniach przenośnych, dostosowując rozmiary sekcji do zmiany orientacji.

jQuery.panelSnap

Demo Pobierz

Brick By BrickJS

Wielu z was z pewnością kojarzy wygląd strony Pinterest. Jeśli kiedykolwiek chcieliście osiągnąć podobny efekt, ta wtyczka nada się do tego idealnie. Układa ona elementy o takiej samej szerokości, ale różnej wysokości, w taki sposób, aby jak najlepiej wykorzystać dostępną przestrzeń. Jest to ciekawe rozwiązanie dla wszelkiego rodzaju list.

Brick-By-BrickJS

Demo Pobierz

MixItUp

A może potrzebujecie wprowadzić efektowne sortowanie i filtrowanie elementów w swoim projekcie? MixItUp to potężna wtyczka, która pozwala na wszystkie te rzeczy, dodatkowo nie ingerując za bardzo w istniejący kod. Ponadto całość dostosowuje się do wymiarów ekranu, dzięki czemu możliwe jest zastosowanie na stronach responsywnych.

MixItUp

Demo Pobierz

Vide

W jednym z wcześniejszych artykułów pisaliśmy, jak ustawić plik wideo jako tło strony internetowej. Ta wtyczka jeszcze bardziej upraszcza ten proces. Należy jednak pamiętać, że plik wideo w tle nie będzie odtwarzany w przeglądarkach na urządzeniach przenośnych. W tym wypadku plugin oferuje zamiennik w postaci umieszczenia statycznego tła.

Vide

Demo Pobierz

rowGrid.js

Jeśli chcieliście wyświetlić w swoim projekcie galerię obrazków w taki sam sposób, jak robi to Google w swojej wyszukiwarce plików graficznych, wtyczka rowGrid daje wam taką możliwość. Ustawia ona obrazki w sposób wyjustowany, odpowiednio dopasowując ich szerokość. przy czym ich wysokość musi być stała.

rowGridjs

Demo Pobierz

Flickerplate

Flickerplate pomaga stworzyć efektowny pokaz slajdów z obsługą dotyku, dzięki czemu łatwiej jest przechodzić pomiędzy poszczególnymi slajdami na urządzeniach mobilnych. Wtyczka zajmie się również wygenerowaniem klasycznej nawigacji dla użytkowników przeglądarek na komputerach osobistych. Bardzo dobrze sprawdza się w każdej rozdzielczości.

Flickerplate

Demo Pobierz

jInvertScroll

Coś dla miłośników przewijania w poziomie. Wtyczka sprawia, że gdy użytkownik przewija stronę w dół, tak naprawdę przewija ją w prawo. Dodatkowo, możliwe jest zastosowanie efektu parallax i przewijanie kilku warstw jednocześnie w różnym tempie, które zależne jest od całkowitej szerokości warstwy.

jInvertScroll

 Demo Pobierz

jquery.adaptive-backgrounds.js

Fantastyczna wtyczka, która ustawia kolor tła obrazka na taki, jaki jest dominujący na nim kolor. Genialne rozwiązanie na przykład w przypadku, gdy nie zawsze dysponujemy obrazkiem o podanych rozmiarach i chcemy jakoś wypełnić tło. Możemy też ustawić kolor tła strony na taki, by pasował do głównego obrazu.

jqueryadaptive-backgroundsjs

Demo Pobierz

Mam nadzieję, że zaprezentowane tu wtyczki wam się podobały i znajdą zastosowanie w projektach, nad którymi pracujecie. A może sami korzystacie z jakiś niewymienionych tu wtyczek i chcielibyście się podzielić z innymi?