Скрипт 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();
На этом собственно все. Сегодня вы научились делать эффектные анимации при скроле. И само собой, этот эффект придаст вашему сайту более приятный внешний вид.
Комментарии ()