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