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.
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.
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.
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ć.
Bardzo ciekawa biblioteka z animacjami. Mamy w niej do wyboru różnego typu efekty aktywujące się po najechaniu kursorem myszy na przycisk.
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.
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).
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.
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.
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.
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
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…
