Ciekawe biblioteki z animacjami, które odmienią twoją stronę

Ciekawe biblioteki z animacjami, które odmienią twoją stronę

Czas czytania: 3 minut

Dobrym i sprawdzonym sposobem na „ożywienie” strony internetowej jest zastosowanie na niej różnych animacji. Właściwie dobrane i umiejscowione efekty potrafią poprawić odbiór każdej strony – ale jak zwykle trzeba przy tym pamiętać o umiarze.

Wprowadzenie – czyli na co zwrócić uwagę

We wcześniejszych wpisach pokazywałam już jak samodzielnie wykonać proste animacje – bez konieczności dodawania do witryny internetowej dodatkowych plików. Potrzebne nam było jedynie CSS, które jak się przekonaliśmy daje nam spore możliwości.

Tym razem podejdziemy trochę inaczej do tematu i pokaże wam kilka gotowych do użycia animacji zawartych w kilku użytecznych bibliotekach. Dodanie takiej biblioteki zajmie nam najwyżej chwile i zaoszczędzi całkiem sporo pracy. Zestawienie bibliotek podobnie jak inni blogerzy przygotowałam w formie listy.

Znalazły się na niej biblioteki polecane przez różnych Frond end developerów, korzystające z CSS3 oraz JavaScript (lub np. jQuery). Po przeczytaniu krótkiego opisu zalecam wejście na stronę i przyjrzenie się im z bliska.

Animate.css

biblioteka z ciekawymi animacjami animate.css

Pierwszą na mojej liście godną uwagi biblioteką jest biblioteka Animate.css. Stanowi ona jedną z mniejszych i łatwiejszych w obsłudze bibliotek CSS. Po zainstalowaniu biblioteki wystarczy dodać odpowiednią klasę na określony obiekt HTML a animacja sama się wykona.

Doskonałym rozszerzeniem dla tej biblioteki jest WOW.

Magic animations

animacje na przyciskach Magic animations
magic animations Ciekawe biblioteki z animacjami, które odmienią twoją stronę

Framework Magic animations – stanowi bogaty zbiór animacji, można je łatwo przetestować wystarczy jedynie przycisnąć przycisk z nazwą efektu. Automatycznie włączy się wtedy ukryta pod nim animacja. Słowa na przycisku podpowiadają nam również jakiego typu animacji możemy się spodziewać.

Hover.css

biblioteka z animacjami na stronę internetową Hover.css
Hover.css Ciekawe biblioteki z animacjami, które odmienią twoją stronę

Bardzo ciekawa biblioteka z animacjami. Mamy w niej do wyboru różnego typu efekty aktywujące się po najechaniu kursorem myszy na przycisk.

DynCSS

DynCSS

Być może po zapoznaniu się z powyższymi bibliotekami uznacie, że ta jest zupełnie inna. DynCSS zajmuje się bowiem bardziej motoryką strony. Nadająca się dość dobrze np. do urozmaicenia paralaksy na naszej stronie. Autorzy przygotowali też ciekawe demo demontujące przykład zastosowania.

CSShake

CSShake

To ciekawa biblioteka zawierająca zarówno efekty aktywujące się po najechaniu kursorem myszy (efekt hover) jaki i działające w trybie ciągłym cały czas (wykonują np. drgania).

Bounce

Bounce.js

Z pomocą tej biblioteki (narzędzia) możemy stworzyć kilka ciekawych animacji, które przed użyciem możemy przetestować na stronie i dostosować do swoich potrzeb.

Tuesday

Tuesday
Tuesday

Jedną z rzeczy jakie podobają mi się w bibliotece Tuesday jest jej prostota. Biblioteka zawiera dwa typy animacji: wejścia i wyjścia. Nie są to może zbyt ambitne animacje, ale dosyć subtelne.

mojs.io

biblioteka mojs.io animacja
mojs.io

Przyznam, że ta biblioteka była dla mnie miłym zaskoczeniem i w pewnym sensie odskocznikiem od poprzednich. Nie jest to może najłatwiejsza w użytkowaniu biblioteka, ale z pewnością należy do bardziej ciekawych i efektownych np. Przykład działania.

AniJS

anijs animacje na stronę internetową
anijs Ciekawe biblioteki z animacjami, które odmienią twoją stronę

Ostatnią, ale równie ciekawą biblioteką do animacji na stronach internetowych jest anijs (jak sama nazwa mówi plugin wykorzystuje skrypty JS).
AniJS to interesująca biblioteka o bardzo rozsądnych rozmiarach nie powinna więc mocno spowolnić ładowania się strony. Biblioteka pod wieloma względami wyróżnia się na tle innych – chociaż by pod względem stosowanego kodu.

źródła:
https://www.sitepoint.com/our-top-9-animation-libraries/
https://www.webdesignerdepot.com/2018/01/10-best-free-animation-libraries-for-the-web/

dodatkowe tagi:
Animacje JS i CSS