Используем библиотеку 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