Создание анимации с Animate.css

2 ноября 2013 | Опубликовано в css | 1 Комментарий »

Несмотря на все трудности возникающие при создании анимации, безусловно стоит стремиться к получению навыков, приобретению уверенности и достижению мастерства в этой области. Ден Эден – дизайнер и студент из Манчестера (Великобритания) — создал своеобразную библиотеку анимации Animate.css. По его словам, изначально идея возникла для оптимизации собственного времени на разработку проектов, а затем приобрела большие масштабы. Теперь все желающие могут ознакомиться с ней и использовать в своих проектах.

«При реализации нескольких своих проектов я работал с анимацией CSS3 по ключевым кадрам и заметил, что повторяю код. Чтобы не делать это в будущем я начал создавать анимационную библиотеку. После завершения я был доволен собой и выпустил код на GitHub, где его и можно взять».

Как же на практике применять библиотеку Animate.css? В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.

1. Для начала следует скачать и подключить библиотеку. Есть три варианта.

Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит для первого этапа ознакомления с анимацией в целом, поскольку позволяет разобраться в том, как это всё устроено.
Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.

Далее подключаем файл animate.css через тег <link> как это делается с любым другим стилевым файлом.

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

2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта. Например, вы хотите добавить мерцание ко всем изображениям на странице. В 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> 

          $(document).ready(function () { 
          $('img.animated').hover(
           function () {
           $(this) .addClass('bounce');  // Добавляем класс bounce
           },
           function () {
           $(this) .removeClass('bounce');  // Убираем класс 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;
 }

Стоит отметить, что эффекты, представленные в Animate.css удобнее, быстрее и изящнее, чем некоторые из аналогичных в JavaScript. И если вы хотите получить несколько быстрых эффектов, Animate.css - отличный выбор.

Автор — htmlbook.ru, Animate.css.

Смотрите также:

Опубликовано в css, ноября 2, 2013
Метки: css, CSS анимация и jQuery, css-анимация, анимация, анимация веб, анимация на сайтах, верстка, дизайн, урок css, урок верстка, эффекты css

�

Создание анимации с Animate.css

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые