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ż

Ciekawe rozwiązania z użyciem tabów na stronie int... Poniżej znajdziecie kilka ciekawych zastosowań do różnych celów tabów (zakładek). Czym charakteryzują się taby: Tab jak sama nazwa mówi jest formą zak...
Równej wysokości kolumny Dość częstym problemem przy budowaniu strony internetowej jest utworzenie kolumn o równej wysokości. Wyrównanie dwóch kolumn z pewnością nikomu nie sp...
Element HTML z pionowym tekstem Tym razem pokaże w jaki sposób uzyskać efekt pionowo pisanego tekstu w elemencie HTML. Jak uzyskać efekt pionowego tekstu Na początek rozdziela...
Animowana ikona „Hamburger” menu Jak zapewne każdy z was zauważył, że na niektórych stronach internetowych (głównie mobilnych) menu pokazuje się dopiero po kliknięciu w ikonę (trzy li...