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

Версия: 1.1.2

 

Краткое описание

WOW.js позволяет отложить запуск анимации элементов до момента их отображения на экране при прокрутке страницы. Разработчик WOW.js рекомендует использовать Animate.css для анимации. Эта библиотека поддерживает более 70 эффектов.

Подключение

Для работы необходимо подключить Animate.css и WOW.js.

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

Перед использованием нужно активировать WOW.js.

Дальнейшее управление анимацией осуществляется добавлением классов и data-атрибутов.

wow — стандартный класс WOW.js, скрывающий элемент до момента отображения на экране;

slideInLeft — один из эффектов библиотеки Animate.css (более подробно — в документации);

data-wow-duration — изменяет время анимации;

data-wow-delay — задержка перед запуском анимации;

data-wow-offset — расстояние в пикселях от нижнего края браузера до верхней границы элемента необходимое для начала анимации;

data-wow-iteration — количество повторений анимации;

Расширенная настройка

7 thoughts on “WOW.js — анимация элементов при прокрутке страницы

  1. Юрий

    Добрый день! Подскажите пожалуйста как отключить анимацию для мобильных и планшетов.

  2. Андрей

    Не могу найти как можно изменить промежуток времени между повторением анимации.

    Кто подскажет ?

  3. Игорь

    Есть одна проблема. Когда страница загружается, то анимированные элементы сначала на мгновение просто появляются на экране, а потом еще раз появляются уже с анимацией. Как сделать чтоб они появлялись первый раз уже с анимацией? Подскажите если не сложно.

    1. Алекс

      почему то не хватает стиля:
      .wow {
      visibility: hidden;
      }
      он скрывает до отыгрывания анимации
      добавьте в стили, это решит проблему

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *