Використання Animate.css

08.08.2013

Влад Мержевич

Після прочитання цієї статті у багатьох відвідувачів виник питання, як саме застосовувати бібліотеку Animate.css на практиці. Насправді все відбувається досить просто, потрібно лише один раз пройти всі етапи, а потім за аналогією повторювати деякі дії.

1. Для початку слід завантажити і підключити бібліотеку. Є три варіанти.

Повна версія. Містить понад три тисячі рядків коду обсягом близько 60 кб. Відмінно підходить на першому етапі ознайомлення з анімацією в цілому, оскільки дозволяє побачити, як це все працює.
Упакована версія (зашифрована, говорять професіональною мовою). У css-файлі відсутня табуляція, пробіли і переноси рядків. Обсяг файлу завдяки цьому скорочується в полтора рази, але читати код при цьому стає ускладненим.
Вибіркові ефекти. Найкраще підходить для більшості завдань, оскільки дозволяє вказати лише подобаються ефекти, позбавившись від зайвого.

Далі підключаємо файл animate.css через тег <link> як це робиться з будь-яким іншим стилевим файлом.

<link href="animate.css" rel="stylesheet">

2. Щоб застосувати ефект анімації до бажаного елементу, додаємо до нього два класи — animated і клас з назвою ефекту, наприклад fadeInDown (список всіх ефектів і їх назви дивимося тут). Наприклад, ви бажаєте додати миготіння до всіх зображень на сторінці. У HTML записуємо наступне:

<img src="images/figure.jpg" alt="Вінні-Пух" class="animated flash">

Якщо на сайті використовується jQuery, то додавання класів спрощується і робиться через JavaScript.

<script> 
$(document).ready(function() {
  $('img').addClass('animated flash'); 
})
</script>

3. Сама анімація включається автоматично при завантаженні сторінки. Це зручно для виринаючих повідомлень, спрямованих на привертання уваги користувача (приклад 1).

Приклад 1. Виринаюче повідомлення

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Попередження</title>
  <link href="style/animate.css" rel="stylesheet">
  <style>
   .warning {
    background: #fc0;
    padding: 10px;
    border: 1px solid #000;
   }
  </style>
 </head>
 <body>
  <div class="animated fadeInDown warning">
   Зенітне годинне число оцінює екваторіальний секстант!
  </div>
 </body>
</html>

Щоб ефект спрацьовував при наведенні на елемент курсора миші, доведеться використовувати JavaScript. В якості прикладу розглянемо зображення, які рухаються при наведенні на них курсора миші. До тегу <img> додаємо клас animated і підключаємо jQuery (приклад 2).

Приклад 2. Галерея

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Галерея</title>
  <link href="style/animate.css" rel="stylesheet">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script>
   $(document).ready(function() {
    $('img.animated').hover(
     function() {
      $(this).addClass('bounce'); // Додаємо клас bounce
     },
     function() {
      $(this).removeClass('bounce'); // Прибираємо клас
     }
    )})
  </script>
 </head>
 <body>
   <img src="images/thumb1.jpg" alt="" class="animated">
   <img src="images/thumb2.jpg" alt="" class="animated">
   <img src="images/thumb3.jpg" alt="" class="animated">
 </body>
</html>

У цьому прикладі при наведенні курсора на зображення з класом animated додається ще один клас bounce; якщо курсор видалити, то клас bounce також видаляється.

4. Остаточно можна налаштувати анімацію за своїм смаком, змінивши швидкість анімації, а також встановивши час затримки через CSS. І те і інше не є обов'язковим і використовується за потреби.

.animated {
  -webkit-animation-duration: .6s;
  -o-animation-duration: .6s;
  -moz-animation-duration: .6s;
  animation-duration: .6s;
  
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

анімація

Часті запитання