Animate.css: как добавить анимацию на сайт

Вы, наверное, обращали внимание на анимационные эффекты при показе контента на некоторых сайтах.

Очень красиво, необычно выглядит постепенное отображение картинок или выползающий блок с предложением подписаться на рассылку или прочитать следующий пост.

Добавить анимацию для блоков или изображений вовсе не сложно, сегодня я расскажу как это сделать.

Как вызвать анимацию в нужном месте и в нужное время:
Часть вторая

Основой многих эффектов является сборник animate.css
Он создан Дэном Эденом, британским дизайнером из Манчестера.

Посмотреть все эффекты анимации animate.css можно здесь - https://daneden.github.io/animate.css

Там же можно скачать файл animate.css

Оцените анимацию на примере моей новой темы для wordpress All Services:

- Анимация блоков,
- Анимация текста.

Чтобы оценить эффект полностью, прокрутите страницу вниз.

Итак, как добавить анимацию на сайт?

Содержание:

1. Скачайте файл animate.css
2. Подключите файл animate.css
3. Выберите подходящий эффект
4. Примените его к нужному элементу

↑ Скачайте файл animate.css

Можно использовать полную версию этого файла - https://github.com/daneden/animate.css/blob/master/animate.css .
Она подойдет, если вы планируете изменять ее под свои нужды.

Или упакованную версию - https://github.com/daneden/animate.css/blob/master/animate.min.css, обфусцированную, говоря русским языком :).

Она меньше размером и подойдет, если вы не планируете разбираться с ней подробнее.

↑ Подключите файл animate.css

Подключить его нужно в functions.php, примерно так:

// register scripts & styles
function animate_scripts() {
  if (!is_admin()) {
     wp_register_style('animate', esc_url(get_template_directory_uri()). '/css/animate.css');
     wp_enqueue_style('animate');
   }
}
add_action('wp_enqueue_scripts', 'animate_scripts');

Почему function animate_scripts, а не animate_style?

Потому, что в продолжении поста я расскажу, как расширить возможности этой библиотеки при помощи скриптов, которые мы подключим одновременно с animate.css.

↑ Выберите подходящий эффект

Это можно сделать здесь - https://daneden.github.io/animate.css/
Протестируйте все возможности анимации и подберите подходящий вам визуальный эффект.

↑ Примените его к нужному элементу

Пример 1: Добавление плавного появления заголовка статьи, блока с текстом или изображения, как в моей теме All Services или изображении этого поста.

Демо

Начнем с заголовка статьи: в файле single.php найдите тег H1. Добавьте к нему два класса: animated + zoomIn. Вот так:

<h1 class="animated zoomIn">

animated - обозначает анимацию, а zoomIn - это названием эффекта.

Применить его блоку текста можно аналогично.

Пример 2: Добавление пульсации к блоку или изображению.

Демо

Проверьте картинку с изображением шаблонов. Она увеличивается и уменьшается при загрузке страницы.

Такой эффект можно применить к контенту, на который вы хотите обратить внимание посетителя.

За эффект пульсации отвечает класс pulse, добавляем его к выбранному блоку контента.
Вот так:

<div class="animated pulse">

Пример 3: Выползающий справа блок подписки.

Демо

К блоку нужно добавить animated bounceInRight.

Вот так:

<div class="sub-box animated bounceInRight">

Пример 4: Выпадающий блок.

К блоку нужно добавить animated bounceInDown.

Вот так:

<div class="sub-box animated bounceInDown">

Вы уже, наверное, поняли, что анимация включается автоматически при загрузке страницы и происходит один раз.

Иногда, это удобно, например для всплывающих сообщений, к которым нужно привлечь внимание посетителя.
Но, иногда требуется повторяющийся эффект, например для пульсации или постепенной загрузки контента.

В следующем посте я опишу, как управлять анимацией, чтобы вызвать ее так и тогда, как нам это нужно.