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

wowjs-1-6072976

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

wowjs-4875041

Использование 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();

Читайте также: