15 Przydatnych wtyczek jQuery

Witajcie,

Jeszcze siedem lat temu nie wiedzieliśmy czym jest jQuery, dziś jest nieodłącznym elementem niemal każdej strony internetowej. Od roku 2006 ów biblioteka JavaScript zrobiła niebagatelną rewolucję w świecie technologii WWW. W sieci można znaleźć tysiące skryptów korzystających z dobrodziejstw jQuery – począwszy od bardzo podstawowych sliderów a skończywszy na bardzo złożonych strukturach AJAX, które umożliwiają płynne ładowanie treści. W tym milionowym gąszczu rozszerzeń można znaleźć „perełki”, które mogą nie tylko ułatwić pracę, ale i uczynić projekt bardziej wyjątkowym.

Dziś przedstawię Wam piętnaście darmowych wtyczek, które moim zdaniem będziecie mogli swobodnie wykorzystać w większości swoich projektów. Przy wyborze kierowałem się użytecznością oraz trendami jakie obecnie kreują sieć. Przygotowując materiały do tego artykułu znalazłem wiele inspiracji sam dla siebie i liczę na to, że z Wami będzie tak samo. Pamiętajcie, że prawie każdy plugin, możecie dostosować do własnych potrzeb (chyba że w licencji jest napisane inaczej), co daje ogromne możliwości – ograniczeniem jest jedynie wyobraźnia.

Zatem zaczynamy!

Adaptive Thumbnail Pile Effect
Znakomita wtyczka pozwalająca na grupowanie miniatur w stosie i estetyczne wędrowanie po jego zawartości. Grupowanie następuje po dodaniu atrybutów, każdy stos możemy odpowiednio zatytułować. Świetnie rozwiązanie do zaadaptowania na przykład w portfolio.

FlipClok.js

FlipClock, jak sama nazwa już wskazuje – umożliwia nam stworzyć dobrze prezentujący się zegar, który w postaci cyfrowej może wyświetlać aktualny czas lub odliczać czas do ustalonej wcześniej daty i godziny. Szczególnej uwagi jest warta ów funkcja „odliczania”, która coraz częściej jest wykorzystywana przy upływie trwania promocji. Dodatkowo, wtyczka posiada przejrzyste API, dzięki czemu możemy swobodnie modyfikować FlipClock’a, włącznie z jego wyglądem.

BookBlock

Kolejny ciekawy plugin, który pozwala uzyskać bardzo oryginalny i świetnie wyglądający efekt, jakim jest „przewracanie kartek”. Wtyczkę możemy zastosować nie tylko dla obrazów, ale także pozostałych elementów HTML.

Windy

Pozwala na szybką nawigację po kontencie ułożonym w stos przy wykorzystaniu transformacji 3D w CSS. W rezultacie możemy cieszyć oko intrygującym efektem przypominającym rozrzucanie talii kart.

Quicksand
Bardzo przydatna wtyczka umożliwiająca sortowanie i filtrowanie pozycji z wykorzystaniem efektownych animacji. Śmiało może być zastosowana do filtracji produktów czy też elementów w portfolio. Implementacja skryptu jest prosta; wystarczy, że nadamy indywidualny atrybut danej pozycji.

Blur.js
Ile razy zastanawialiście się jak uzyskać efekt rozmycia tła znajdującym się na przykład pod wyskakującym alertem? Wtyczka blur.js wyśmienicie radzi sobie z tym problemem; nie tylko rozmywa obrazy znajdujące pod danym elementem, ale także pozostałe elementy HTML.

Timeline JS
Niezwykle interesujący plugin umożliwiający stworzenie linii czasu w formie slidera. Na osi możemy umieszczać różne typy mediów począwszy od YouTube a skończywszy na Wikipedii – możliwości są nieustannie rozbudowywane. Pomyślcie tylko na ile sposobów można wykorzystać tą wtyczkę – mi już świta w głowie kilka pomysłów. Z początku użycie może wydawać się skomplikowane, lecz autorzy skryptu zbudowali łatwy w obsłudze panel do generowania własnej linii. Skrypt pobiera dane z przygotowanego specjalnie szablonu arkuszu Google Spreadsheet, który należy uprzednio zmodyfikować. Dodatkowym atutem jest fakt, że wygenerowana linia czasu będzie działać nie tylko na desktopach, ale również na urządzeniach mobilnych poprzez wykorzystanie Responsive Design.

Alertify.js
Doskonałe rozwiązanie, gdy potrzebujemy poinformować o czymś użytkownika witryny. Alertify.js jest alternatywą dla okienek typu alert(), confirm() oraz prompt() standardowo zdefiniowanych przez każdą przeglądarkę inaczej, co nie wygląda zbyt profesjonalnie; tu, przy pomocy CSS możemy dopasować wygląd okienek do całego projektu. Wtyczka ponadto oferuje zgrabne powiadomienia, które mogą wyświetlać się w rogach strony. Skrypt z powodzeniem poradzi sobie również na urządzeniach mobilnych.

iCheck
 Wtyczka zmieniająca wygląd i funkcjonowanie pól typu Checbox oraz Radio. Na pierwszy rzut oka podobne rezultaty możemy uzyskać za pomocą CSS, lecz będziemy mieli problem z przeglądarką Internet Explorer 8 i starszymi wersjami, w których uzyskanie upragnionego efektu może okazać się nie lada wyzwaniem. Z pomocą przychodzi iCheck oferuje pełną gamę możliwości – do naszej dyspozycji jest ponad trzydzieści opcji, które możemy modyfikować do własnych potrzeb.

Textillate.js
Prosta wtyczka pozwalająca na wykonanie schludnych animacji CSS3. Skrypt zawiera jeszcze dwie biblioteki animate.css oraz text.js dzięki czemu Textillate.js oferuje ponad dwadzieścia efektów, które możemy nanieść na tekst. Ponadto wtyczka zapewnia przejrzyste API, co znacznie ułatwi użycie.

Toolbar.js
Wtyczka przydatna szczególnie dla twórców aplikacji webowych. Toolbar umożliwia tworzenie pasków narzędzi w formie tooltip’ów i jest łatwy konfiguracji. Możemy zmieniać jego ustawienia, wygląd oraz zdefiniować własną listę na pasku narzędzi. Toolbar.js działa dobrze również z Bootstrap Twitter .

Twitter Bootstrap – darmowa biblioteka programistyczna, rozwijana przez developerów Twittera, wydawana na licencji Apache License 2.0. Zawiera zestaw przydatnych narzędzi ułatwiających tworzenie interfejsu graficznego stron oraz aplikacji internetowych. Bazuje głównie na gotowych rozwiązaniach HTML oraz CSS i może być stosowana m.in. do stylizacji takich elementów jak teksty, formularze, przyciski, wykresy, nawigacje i innych komponentów wyświetlanych na stronie. Biblioteka posiada także rozszerzenie dla języka JavaScript.

ClassySocial
Znakomita alternatywa dla klasycznego umieszczania serwisów społecznościowych na witrynie. Tradycyjnie, wszystkie przyciski do naszego Social Media są niejako od razu widoczne; po zaimplementowaniu ClassySocial są w bardzo efektowny sposób rozwijane po kliknięciu w uprzednio zdefiniowany przycisk. Ponadto wtyczka automatyzuje proces wstawiania przycisków prowadzących do naszych profili na poszczególnych serwisach – wystarczy, że podamy nazwy profili. Obecnie skrypt obsługuje ponad osiemnaście serwisów społecznościowych, w tym; Facebook, Twitter, Youtube, Vimeo, Google Plus i wiele innych.

Gridster.js
Patrząc na tą wtyczkę nie da się nie zauważyć, że twórcy inspirowali się Windows 8. Gridster.js pozwala bowiem tworzyć siatkę elementów przypominającą styl metro tegoż systemu, i w rzeczy samej możemy uzyskać taki efekt. Skrypt umożliwia dynamicznie dodawać i usuwać pozycje. Rozwiązanie może być wykorzystane na przykład do wyświetlania miniatur wpisów na blogu.

jQuery.BlackAndWhite
Jak sama nazwa już wskazuje, wtyczka pozwala konwertować zdjęcia kolorowe na czarno-białe i na odwrót. Skrypt korzysta z dobrodziejstw HTML5 – z Canvas, co automatycznie wyklucza działanie w starszych przeglądarkach. Jednak dodatkowym atutem jest Responsive Design, dzięki któremu obrazy dostosowują się do rozmiaru przeglądarki.

Lazy Line Painter
To ostatnia wtyczka, którą chcę Wam zaprezentować. LazyLinePainter pozwala wykonać ciekawie wyglądającą animację na podstawie wyeksportowanych linii do formatu .SVG – możemy tego dokonać na przykład przy pomocy Adobe Ilustrator. Wtyczka oprócz biblioteki jQuery wykorzystuje jeszcze jedną – Raphaël do interakcji JavaScript z obiektami wektorowymi.