Установка:
Добавляем на сайт стили animate.css и скрипт WOW.js:
- Скачать: animate.min.css
- Скачать: wow.js
- Скачать: wow.min.js
И подключаем скрипт:
|
1 2 3 |
<script> new WOW().init(); </script> |
Добавление эффектов к элементам:
|
1 2 3 |
<div class="wow bounceInUp"> Анимируемый контент </div> |
Класс wow сделает элемент невидимым пока до него не дойдет прокрутка, а класс bounceInUp добавит эффект появления. Посмотреть все эффекты можно на странице библиотеки animate.css
Примеры:
Дополнительные настройки:
data-wow-duration: Продолжительность анимации
data-wow-delay: Задержка перед запуском анимации
data-wow-offset: Расстояние от нижнего края браузера для запуска анимации
data-wow-iteration: Количество повторов анимации
Пример:
|
1 2 3 4 5 6 7 |
<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 анимацию
offset: Определяет расстояние между нижней частью окна браузера и верхней частью скрытого окна. Когда страница прокручивается и достигает этого расстояния, открывается скрытое поле и запускается анимация.
mobile: Включает и выключает WOW.js на мобильных устройствах.
live: Действие с асинхронно загруженным содержимым.
По умолчанию:
|
1 2 3 4 5 6 7 8 |
wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }) wow.init(); |
WOW.js на сайте wowjs.uk
Добавить комментарий: