Анимация при прокрутке с помощью WOW.js

Анимация при прокрутке с помощью WOW.js

24.09.201527400MSerega

Многие администраторы своих сайтов стараются привлечь внимание своих посетителей кроссбраузерностью своего сайта путем анимации элементов. Выглядит это стильно и привлекательно. Но проблема в том, что после загрузки страницы, анимация запускается для всех элементов сразу, а нам нужно, чтобы она запускалась в момент, когда пользователь когда будет прокручивать страницу.

Как же сделать так чтобы анимация запускалась при прокрутке страницы? Об сегодня мы этом и поговорим в нашей статье. Но для начала рекомендуем вам прочитать этот материал. В нем вы узнаете про файл animate.css который позволит вам анимировать ваши элементы и который является неотъемлемой частью нашего сегодняшнего материала.

Итак, для запуска анимации при прокрутки нам понадобиться небольшая JavaScript библиотека под названием WOW.js. Она имеет небольшой набор функций, параметров и дополнительных настроек. Одним из ее плюсов есть то что для ее использования не нужно подключать библиотеку JQuery. В результате что мы получаем, amimate.css файл с набором анимаций и wow.js файл который берет эту анимацию и запускает ее при прокрутке.

Давайте перейдем к подключению этой библиотеки на свой сайт.

Подключение wow.js

Первым делом у вас должна быть подключена сама анимация animate.css.

Код
<link rel="stylesheet" href="css/animate.css">

Соответственно вторым пунктом будет подключение WOW.js. Для того чтобы ее активировать нужно, прописать еще дополнительно несколько строк.

Код
<script src="js/wow.min.js"></script>

<script>
new WOW().init();
</script>

Две составляющие подключены. Теперь перейдем к примеру, использование давайте создадим блок и пропишем классы wow этот класс обозначает что анимация будет запускаться при прокрутке, если элемент не находиться вверху страницы. И второй класс это сама анимация, возьмем например bounceInUp. Таким образом у нас должно получиться вот такой код.

Код
<div class="wow bounceInUp">
Ваш контент
</div>

Как мы уже говорили, библиотека имеет несколько параметров для более подробной настройке анимации.

Дополнительные параметры

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, только в глобальном масштабе;

mobile: включить/выключить WOW.js на мобильные устройства.

live: постоянная проверка новых WOW элементов на странице.

Код
wow = new WOW(
{
  boxClass: 'wow', // default
  animateClass: 'animated', // default
  offset: 0, // default
  mobile: true, // default
  live: true // default
}
)
wow.init();

На этом все, инструкция как использовать библиотеку WOW.js для анимирование элементов при прокрутке закончена. Пишите свои отзывы и комментируйте материал. Делитесь с друзьями.




Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт