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.
Co znajdziesz w tym wpisie
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
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
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
Bardzo ciekawa biblioteka z animacjami. Mamy w niej do wyboru różnego typu efekty aktywujące się po najechaniu kursorem myszy na przycisk.
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
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
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
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
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
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.