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

HTML5 CSS3

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



Dobrym i sprawdzonym sposobem na „ożywienie” strony internetowej jest zastosowanie na niej różnych animacji. Właściwie dobrane i umiejscowione zmienią nawet ponurą stronkę w coś ciekawego – ale jak zwykle trzeba przy tym pamiętać o umiarze.

We wcześniejszych wpisach pokazywałam już jak samemu wykonać proste animacje – bez konieczności dodawania do strony dodatkowych plików. Tym razem pokaże jednak kilka użytecznych bibliotek zawierających zbiór gotowych efektów, które w łatwy sposób możemy zastosować w naszej witrynie. Poniższe biblioteki uwzględniają efekty napisane w CSS3 oraz JavaScript (lub np. jQuery)

1. Animate.css

animate.css

animate.css

Animate.css jest 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

Magic animations – to bogaty zbiór animacji, można je łatwo przetestować wystarczy jedynie przycisnąć przycisk z nazwą efektu.

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

Jest to biblioteka idealnie nadająca się do urozmaicenia paralaksy na naszej stronie demo.

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

Przeczytaj również

Nietypowe menu na twoją stronę – inspiracje... Menu na stronie internetowej odgrywa bardzo istotną rolę. W większości ogranicza się ona do bycia jedynie nawigacją ułatwiającą poruszanie się wewnątr...
Właściwość CSS – resize Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea). Właściwość resize jest ściśle powiąza...
Właściwość CSS scroll-behavior Właściwość CSS scroll-behavior pozwala nam określić, w jaki sposób ma nastąpić przewinięcie treści strony podczas skoku z jednego punktu do drugiego. ...
Przekreślenie Tekstu HTML/CSS Istnieje kilka metod z pomocą, których możemy przekreślić słowo lub wybrany fragment tekstu. W HTML przekreślamy tekst z pomocą odpowiednich znacznik...