Классная библиотека wow.js, с помощью которой можно подключить более 70 эффектов анимированного появления блоков при прокрутке страницы. Особенно актуально для создания лендинг пейдж, чтобы оживить длинную страницу яркими эффектами появления секций.
Использование wow.js
Официальный сайт проекта. Там же можно посмотреть примеры эффектов.
1. Скачиваем библиотеку отсюда.
2. Подключаем на сайте animate.css:
<link rel="stylesheet" href="css/animate.css">
Подключаем wow.js и вызываем:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
3. Добавляем класс wow для нужного элемента.
<div class="wow">Текст</div>
4. И добавляем класс эффекта, например bounceInUp:
<div class="wow bounceInUp">Текст</div>
К элементу так же можно добавить некоторые настройки с помощью data-* атрибутов:
<div class="wow bounceInUp" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10">Текст</div>
slideInLeft — один из эффектов библиотеки Animate.css (более подробно — в документации).
data-wow-duration — изменяет время анимации.
data-wow-delay — задержка перед запуском анимации.
data-wow-offset — расстояние в пикселях от нижнего края браузера до верхней границы элемента необходимое для начала анимации.
data-wow-iteration — количество повторений анимации.
Более расширенная настройка библиотеки:
var wow = new WOW( {
boxClass: 'wow', // класс, скрывающий элемент до момента отображения на экране (по умолчанию, wow)
animateClass: 'animated', // класс для анимации элемента (по умолчанию, animated) offset: 0, // расстояние в пикселях от нижнего края браузера до верхней границы элемента, необходимое для начала анимации (по умолчанию, 0)
mobile: true, // включение/отключение WOW.js на мобильных устройствах (по умолчанию, включено)
live: true, // поддержка асинхронно загруженных элементов (по умолчанию, включена)
callback: function(box) {
// функция срабатывает каждый раз при старте анимации
// аргумент box — элемент, для которого была запущена анимация
},
scrollContainer: null // селектор прокручивающегося контейнера (опционально, по умолчанию, window)
});
wow.init();