Анимация при прокрутке страницы

WOW.js - это самостоятельная JS библиотека для анимации элементов по мере прокрутки страницы. Самостоятельная - значит она не требует jQuery как 99% современных библиотек. WOW.js позволяет анимировать показ элементов при скролле, однако для создания параллакса при скролле лучше использовать другую библиотеку.

Преимущества библиотеки:

• Независимость от других JS библиотек;
• Маленький размер - 3Кб в минифицированном виде и 1.5 Кб в gzip;
• Очень проста в установке и настройке. Вам вообще ничего не надо по сути настраивать;
• Библиотека сама по себе очень "легкая" и не создает видимой нагрузки на браузер. Пользователи будут вам благодарны;

Недостатки:

• Зависимость от animate.css, хотя вы можете от нее отказаться и написать свои анимации с блекджеком и кейфреймами;
• Анимация не откатывается при обратной прокрутке;

Подключение и инициализация

Для начала подключим необходимые файлы стилей и сам скрипт:

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.min.js"></script>

Далее в вашем app.js (например) инициализируйте WOW.js:

new WOW().init(); // Не обязательно оборачивать вызов в $(document).ready(), т.к. у нас нет зависимости от jQuery

Далее к нужному элементу необходимо добавить класс wow и класс для CSS анимации, например так:

<div class="wow bounceInUp">Здесь уже ваш контент, картинки и прочее</div>

Дополнительная настройка HTML элементов

У каждого элемента можно указывать несколько специальных аттрибутов для более тонкой настройки анимации:

• data-wow-duration: Изменение длительности анимации;
• data-wow-delay: Задержка перед стартом анимации;
• data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
• data-wow-iteration: Сколько раз повторять анимацию?

Например так:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>

Дополнительные настройки при инициализации

При инициализации объекта можно передать объект с параметрами:

• boxClass: Класс для wow-объектов;
• animateClass: Класс для срабатывания CSS анимации ('animated' для animate.css);
• offset: То же самое, что и data-wow-offset, только в глобальном масштабе;

И, конечно, пример:

wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0
});
WOW.init();

Проект на GitHub: https://github.com/matthieua/WOW

Документация: http://mynameismatthieu.com/WOW/docs.html

Демо с собачками и котиками: http://mynameismatthieu.com/WOW/

Реальное использование: http://www.streamlineicons.com/