Главная › HTML и CSS › Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js

Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js

Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js

Используем библиотеку WOW.js документация здесь.

Подключаем WOW.js

1. Подключаем библиотеку Animate.css
(можно подключить любую другую библиотеку для анимации, и указать ее в опциях WOW.js)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

2. Подключаем и активируем WOW.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
  new WOW().init();
</script>

Анимируем элементы на странице

Добавляем элементу класс .wow — элемент будет невидимым, пока пользователь не проскролит страницу до него
(в настройках WOW.js можно изменить имя класса, чтобы избежать конфликтов)

<div class="wow">
  Content to Reveal Here
</div>

Выберите стиль анимации в Animate.css, затем добавьте класс CSS в анимируемый элемент HTML

 
<div class="wow bounceInUp">
  Content to Reveal Here
</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: Имя класса, которое показывает скрытый блок при прокрутке страницы пользователем.
animateClass: Имя класса, которое запускает анимацию CSS (animated по умолчанию для библиотеки animate.css)
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 для анимации HTML-элементов:

See the Pen Animate HTML by Denis (@deniscreative) on CodePen.0

Источник
Просмотров:

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

➤