wow.js — эффекты появления блоков при прокрутке страницы

14 февраля 2020 JavaScript

Классная библиотека wow.js, с помощью которой можно подключить более 70 эффектов анимированного появления блоков при прокрутке страницы. Особенно актуально для создания лендинг пейдж, чтобы оживить длинную страницу яркими эффектами появления секций.

Использование wow.js

Официальный сайт проекта. Там же можно посмотреть примеры эффектов.

1. Скачиваем библиотеку отсюда.

2. Подключаем на сайте animate.css:

Подключаем wow.js и вызываем:

        new WOW().init();

3. Добавляем класс wow для нужного элемента.

        Текст

4. И добавляем класс эффекта, например bounceInUp:

        Текст

К элементу так же можно добавить некоторые настройки с помощью data-* атрибутов:

        Текст

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();