Скрипт wow.js реализует на сайте анимацию появления блоков при прокрутке страницы вниз. Скрипт использует библиотеку animate.css и не требует никаких библиотек на javascript
Установка wow.js
Для начала необходимо скачать скрипт:
Нажмите правой кнопкой мышки на кнопку и выберите "Сохранить ссылку как"
Далее перекиньте его в папку с вашим сайтом через FTP и в шапке сайта пропишите:
<script src="/путь до файла/wow.min.js"></script>
Далее вам необходимо скачать animate.css
Нажмите правой кнопкой мышки на кнопку и выберите "Сохранить ссылку как"
Далее перекиньте его в папку с вашим сайтом через FTP и в шапке сайта пропишите:
<link rel="stylesheet" href="/путь до файла/animate.min.css" />
В коде страницы (можно где-нибудь внизу) вставьте следующий код:
<script>
new WOW().init();
</script>
Класс wow сделает элемент невидимым пока до него не дойдет прокрутка, а класс bounceInUp добавит эффект появления. Посмотреть все эффекты можно на странице библиотеки animate.css
На этом установка завершена!
Примеры
Настройки анимации и появления
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>
Параметры WOW
boxClass: Имя класса, которое показывает скрытое поле при прокрутке.
animateClass: Имя класса, который запускает CSS анимацию
offset: Определяет расстояние между нижней частью окна браузера и верхней частью скрытого окна. Когда страница прокручивается и достигает этого расстояния, открывается скрытое поле и запускается анимация.
mobile: Включает и выключает WOW.js на мобильных устройствах.
live: Действие с асинхронно загруженным содержимым.
По умолчанию скрипт имеет следующие параметры:
wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
})
wow.init();
На этом собственно все. Сегодня вы научились делать эффектные анимации при скроле. И само собой, этот эффект придаст вашему сайту более приятный внешний вид.
Комментарии ()