animate.css и wow.js: Делаем качественную анимацию и эффекты на сайте
27 Июля 2015

animate.css и wow.js: Делаем качественную анимацию и эффекты на сайте

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

Чем дальше в лес больше развиваются технологии и инструменты для веб-разработки, тем проще становится веб-мастерам. Так для создания крутых эффектов на сайте есть отличный способ с использованием анимации на CSS3 и плагином jquery для задержки срабатывания эффектов в нужных местах или их вызове по определённым событиям.

Приступим. Необходимо подключить на сайт библиотеку jquery , плагин wow.js и мегапопулярный animate.css файл с анимационными эффектами на CSS3. Animate.css предоставляет несколько десятков анимационных эффектов на любой вкус. Какие из эффектов доступны и какие для этого нужно брать классы, можно посмотреть на сайте разработчика.

Дело остаётся за инициализацией плагина wow.js, его настройкой, а также прописыванием нужных классов в шаблоне сайта.

<script>
var wow = new WOW(
  {
    boxClass:     'wow',      // по умолчанию wow. Класс элементов, которые нужно анимировать
    animateClass: 'animated', // по умолчанию animated. Класс анимации
    offset:       100,          // отступ до элемента, когда будет срабатывать анимация, по умолчанию 0
    mobile:       true,       // анимация на мобильных девайсах, по умолчанию true
    live:         true,       // асинхронная загрузка контента, по умолчанию true
    callback:     function(box) {
      // функция обратного вызова, запускается каждый раз при завершении анимации
    }
  }
);
wow.init();
</script>

По сути наиболее интересным с точки зрения достижения качественных эффектов является параметр offset, все остальное по желанию. Установкой параметра offset задается отступ до элемента от нижней границы экрана, значение по умолчанию 0, - эта именно та точка, в которой элемент становится виден в окне браузера, самая нижняя часть экрана. Если есть желание поднять выше точку запуска анимации, к примеру, если страница длинная и хочется, чтобы срабатывание анимации при прокрутке происходило не у нижней границы экрана, а выше, тогда добавьте значение отступа. Допустим, зададим отступ срабатывания анимации в точке на высоте 100px от нижней границы экрана.

<script>
// инициализация WOW.js
$(window).load(function() {
  var wow = new WOW({
        offset: 100
    })
    wow.init();
});
</script>

Значение этого отступа можно задать в скрипте с вызовом плагина или заданием data атрибута для каждого элемента отдельно, о них ниже.

Остается добавить классы и при необходимости специальные data атрибуты к элементам в шаблоне сайта.Плагин поддерживает следующие атрибуты.

data-wow-duration: изменение продолжительности анимации
data-wow-delay: Задержка перед началом анимации
data-wow-offset: Расстояние до запуска анимации, от нижней границы окна браузера
data-wow-iteration: Количество повторов анимации

Играя с параметрами для установки задержки анимации и скорости анимации можно добиться успеха.

Простой пример. Следующий блок плавно появится на сайте со скоростью анимации 2 секунды и задержкой перед началом анимации в 1.5 сек.

<section class="wow fadeIn" data-wow-duration="2s" data-wow-delay="5s">
  контент
</section>

Комментарии

Использую в своей работе