Jak dodać animacje na stronę internetową? 

Jak dodać animacje na stronę internetową? 

Nic tak nie przyciąga uwagi użytkownika, jak przyjemna dla oka witryna internetowa, na której „coś się dzieje”. Pokaże Ci jak dodać płynne animacje do strony sposobem, w którym zakochasz się od pierwszego użycia!

Zapewne wiesz, że możesz do strony dodać trochę życia z użyciem jQuery. Jednak czy zawsze potrzebujesz jQuery? Nie koniecznie, wystarczy Animate.css.

Czym jest Animate.css

Jak sama nazwa wskazuje Animate.css to plik kaskadowych arkuszy stylów. W pliku zgromadzona jest pokaźna porcja klas CSS3 gotowych do użycia, które wprowadzają animację na stronę.

Zanim będziemy mogli tych klas użyć potrzebujemy pobrać i dołączyć animate.css do naszej strony. Możemy zrobić to w sekcji <head>.


See the Pen head animate.css by Tomasz Wikło (@studioleopard) on CodePen.

Od teraz dodając klasę do danego elementu HTML możemy ten element animować. Przygotowałem dla Ciebie kod, gdzie możesz rzucić okiem na dostępne klasy w akcji. Lista klas jest również dostępna na oficjalnej witrynie projektu.

See the Pen Animate.css by Tomasz Wikło (@studioleopard) on CodePen.

Jak widać efektów, które możesz wykorzystać jest sporo. A co najważniejsze, są bardzo łatwe w użyciu.

Jak zastosować Animate.css?

Dla pierwszego kwadratu z sekcji Attention Seekers wystarczyło dodać trzy klasy: animated infinite bounce. Powinieneś dodać klasę animated do elementu, który chcesz animować. Jeżeli chcesz aby efekt powtarzał się w kółko a nie tylko raz był wykonany, dodaj klasę infinite. Trzecia klasa to animacja, którą chcemy uzyskać.

Czas trwania, opóźnienie wykonywania i powtarzanie

W przykładzie powyżej w osobnym pliku css dodałem do klasy .kwadrat kilka właściwości

See the Pen css animation by Tomasz Wikło (@studioleopard) on CodePen.

animate-duration odpowiedzialny jest za czas trwania animacji, domyślną wartością jest zero, dlatego aby cokolwiek płynnego zobaczyć potrzebujesz określić czas trwania,  animation-delay odpowiedzialny jest za czas, po jakim element „wystartuje” natomiast trzecia.. Wcale nie musisz dodawać klasy infinite dla każdego elementu z osobna. Jeżeli wiesz, że chcesz animować całą grupę elementów wystarczy, że dla danego selektora dopiszesz animation-iteration-count: infinite;
W przykładzie powyżej wszędzie w kodzie html wpisałem infinite aby od razu pokazać zastosowanie klasy, jednak mógłbym dopisać powyższą właściwość do klasy kwadrat i każdy element z klasą kwadrat, byłby powtarzany w nieskończoność.

Chcę więcej! Jak mogę wykorzystać Animate.css efektywniej?

Nie mogę nie wspomnieć w tym wpisie, o dwóch technologiach z którymi Animate.css jest często wykorzystywany. Zapewne nie raz widziałeś strony, gdzie podczas przewijania elementy wysuwają się to z lewej, to z prawej strony, to zaczynają się obracać, ukazywać się jeden po drugim. Aby uzyskać taki efekt, można wykorzystać skrypt WOW.
Jeżeli chciałbyś aby na stronie dany efekt był wykonywany tylko wtedy, gdy użytkownik wykona jakąś akcję (przykładowo kliknie przycisk) twoim drugim przyjacielem będzie jQuery.

I jak, wpadłeś już na pomysł jak urozmaicić swoje witryny za pomocą Animate.css?

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.