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

Kategoria wpisu Frontend, JavaScript, jQuery, PHP, HTML, CSS Tagi: , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 3 minutes

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 strony 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.

1.  Animate.css

"<yoastmark

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.

2. Magic animations

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ć.

3. Hover.css

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.

4. 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.

5. 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).

6. 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.

7. 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.

8. 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.

9. AniJS

AniJS

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ło:
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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *