Анимация при прокрутке с помощью WOW.js
Многие администраторы своих сайтов стараются привлечь внимание своих посетителей кроссбраузерностью своего сайта путем анимации элементов. Выглядит это стильно и привлекательно. Но проблема в том, что после загрузки страницы, анимация запускается для всех элементов сразу, а нам нужно, чтобы она запускалась в момент, когда пользователь когда будет прокручивать страницу.
Как же сделать так чтобы анимация запускалась при прокрутке страницы? Об сегодня мы этом и поговорим в нашей статье. Но для начала рекомендуем вам прочитать этот материал. В нем вы узнаете про файл animate.css который позволит вам анимировать ваши элементы и который является неотъемлемой частью нашего сегодняшнего материала.
Итак, для запуска анимации при прокрутки нам понадобиться небольшая JavaScript библиотека под названием WOW.js. Она имеет небольшой набор функций, параметров и дополнительных настроек. Одним из ее плюсов есть то что для ее использования не нужно подключать библиотеку JQuery. В результате что мы получаем, amimate.css файл с набором анимаций и wow.js файл который берет эту анимацию и запускает ее при прокрутке.
Давайте перейдем к подключению этой библиотеки на свой сайт.
Подключение wow.js
Первым делом у вас должна быть подключена сама анимация animate.css.
Соответственно вторым пунктом будет подключение WOW.js. Для того чтобы ее активировать нужно, прописать еще дополнительно несколько строк.
<script>
new WOW().init();
</script>
Две составляющие подключены. Теперь перейдем к примеру, использование давайте создадим блок и пропишем классы wow этот класс обозначает что анимация будет запускаться при прокрутке, если элемент не находиться вверху страницы. И второй класс это сама анимация, возьмем например bounceInUp. Таким образом у нас должно получиться вот такой код.
Ваш контент
</div>
Как мы уже говорили, библиотека имеет несколько параметров для более подробной настройке анимации.
Дополнительные параметры
data-wow-duration: Изменить длительность анимации;
data-wow-delay: Задержка перед началом анимации;
data-wow-offset: Расстояние для запуска анимации (от нижнего края браузера);
data-wow-iteration: Сколько раз анимация повторяется?
Ваш контент
</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, только в глобальном масштабе;
mobile: включить/выключить WOW.js на мобильные устройства.
live: постоянная проверка новых WOW элементов на странице.
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();
На этом все, инструкция как использовать библиотеку WOW.js для анимирование элементов при прокрутке закончена. Пишите свои отзывы и комментируйте материал. Делитесь с друзьями.
