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

14 февраля 2020 JavaScript
Классная библиотека wow.js, с помощью которой можно подключить более 70 эффектов анимированного появления блоков при прокрутке страницы. Особенно актуально для создания лендинг пейдж, чтобы оживить длинную страницу яркими эффектами появления секций.
Использование wow.js
Официальный
1. Скачиваем библиотеку
2. Подключаем на сайте animate.css:
<link rel="stylesheet" href="css/animate.css">
Подключаем wow.js и вызываем:
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
3. Добавляем класс wow
для нужного элемента.
<div class="wow"> Текст </div>
4. И добавляем класс эффекта, например bounceInUp:
<div class="wow bounceInUp"> Текст </div>
К элементу так же можно добавить некоторые настройки с помощью data-* атрибутов:
<div class="wow bounceInUp" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"> Текст </div>
slideInLeft — один из эффектов библиотеки Animate.css (более подробно — в документации).
data-wow-duration — изменяет время анимации.
data-wow-delay — задержка перед запуском анимации.
data-wow-offset — расстояние в пикселях от нижнего края браузера до верхней границы элемента необходимое для начала анимации.
data-wow-iteration — количество повторений анимации.
Существуют различные способы продвижения в интернете. Один из самых эффективных – это раскрутка в социальных сетях. Для этого лучше всего использовать готовые сервисы, которые делают все работу по продвижению автоматически. SMM накрутка поможет вашему аккаунту быстро стать популярным и выйти на монетизацию.
Более расширенная настройка библиотеки:
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();
Добавить комментарий