Ładowanie...

Animate.css, czyli proste animacje w czystym css

Witam. Coraz więcej serwisów internetowych zawiera w sobie efektowne animacje, przejścia, przekształcenia elementów. Kiedyś za te efekty odpowiadały grafiki, np. gif'y, jednak obecnie nie jest już to efektywne rozwiązanie, dlatego wykorzystuje się dobrodziejstwa CSS. Zatem, z czego korzystać? Jak stworzyć lekką, a zarazem efektowną stronę?

Animate.css, czyli proste animacje w czystym css

Animate.css, jako zbiór przydatnych animacji

Oto narzędzie, które ułatwia pracę nad tworzeniem prostych i efektownych animacji wejść elementów na stronie. Wystarczy zaimplementować plik w sekcji head na stronie i użyć odpowiedniej klasy css do wybranego elementu. Dostępnych efektów na obecną chwilę jest aż 75, także jest z czego wybrać. Oto ich lista:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Prawda, że sporo?

Przykład wykorzystania

Do naszego elementu dodajemy klasę animated. Musimy dodać także drugą klasę css, która będzie wskazywała, co się stanie z naszym elementem, np. fadeInUp. Oznacza to, iż element pojawi się odsłaniając się i przesuwając się od dołu ku górze do miejsca docelowego. Przykładów jest więcej (75).

Elementy dynamiczne

Naturalnie w tym przypadku przychodzi nam z pomocą jQuery oraz selektory. Gdy chcemu, aby element pojawił się, np. dopiero po jakiejś akcji (kliknięciu), należy użyć następującej konstrukcji:

$('btn').click(function () {
$('.element').addClass('animated bounceOutLeft');
})

Dokumentacja

Autorzy rozwiązania zadbali także o deweloperów i przygotowali przydatną dokumentację, wraz z przykładami.

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.