Анимация web-страницы при прокрутке - WOW.js

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

Для начала нужно подключить необходимые файлы: WOW.js и animate.css. Скачать свежие версии всегда можно на GitHub, но если не хотите их искать, то скачайте у нас:

Итак, скачали. Складываем их в нужные папки и подключаем. Обратите внимание на пути. В нашем случае файл animate.css находится в папке /css, а файл wow.min.js — в папке /js.

<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script> new WOW().init(); </script>

Первую строку помещаем в раздел <head>, остальное вниз страницы, но до тега </body>.

Далее всё очень просто: добавляем два класса для любого элемента

<section class="wow slideInLeft">Содержимое блока</section>

, где:
класс wow — подключение элемента к скрипту;
класс fadeInLeft — определенный стиль для анимации элемента.
Часто используют: fadeInRight (Left/Up/Down) и bounceInRight (Left/Up/Down) — это классы для выезжающих элементов.
Все стили можно посмотреть здесь: Animate.css

Можно добавить дополнительный функционал:

data-wow-duration: изменяет продолжительность анимации;

data-wow-delay: задержка перед началом анимации;

data-wow-offset: расстояние до запуска анимации (относительно нижней части окна браузера);

data-wow-iteration: повторяет анимацию «столько-то раз».

В первых двух свойствах обязательно указываем секунды (s). Можно как в целых, так и десятых:

<section class="wow slideInLeft" data-wow-delay="1.2s" data-wow-iteration="10">Содержимое блока</section>

Можно использовать в классах для любого тега.

СВами.