Добавление анимации появления блоков для сайта
Установка:
Добавляем на сайт стили animate.css и скрипт WOW.js:
Скачать: animate.min.css
Скачать: wow.js или wow.min.js
И подключаем скрипт:
<script>
new WOW().init();
</script>Пример:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script type="text/javascript" src="https://ozonbanner.ru/upload/wow.min.js"></script>
<script>
new WOW().init();
</script>Добавление эффектов к элементам:
<div class="wow bounceInUp">
Анимируемый контент
</div>Класс wow сделает элемент невидимым пока до него не дойдет прокрутка, а класс bounceInUp добавит эффект появления. Посмотреть все эффекты можно на странице библиотеки animate.css
Подключаем анимацию с помощью WOW.js
1. Подключаем библиотеку анимаций Animate.css
(можно подключить любую другую библиотеку для анимации, и указать ее в опциях WOW.js)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/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>UPD Для того, чтобы не было мигания элементов на первом экране, которое происходит, когда сайт большой и скрипты прогружаются на доли секунды позже HTML, то есть анимация подключается после того, как уже отобразилась страница, и сначала скрывает элемент а потом его анимирует, то нужно для анимируемых элементов задать правило visibility: hidden;
Можно задать его для отдельных классов или сразу для всех анимируемых элементов, которые имеют общий класс .wow:
.wow {
visibility: hidden;
}Выберите стиль анимации в Animate.css, затем добавьте класс CSS в анимируемый элемент HTML
<div class="wow animate__animated animate__fadeInUp">
Content to Reveal Here
</div>В версии 3.7.0 Animate.css достаточно было добавить класс с названием анимации, например fadeInUp, то начиная с версии 4.0.0 необходимо указывать animate__animated animate__fadeInUp или можно только название анимации animate__fadeInUp, но тогда в параметрах скрипта обязательно нужно изменить дефолтный класс анимации animateClass: 'animated' на 'animate__animated'.
Доступные опции
data-wow-duration: Изменение продолжительности анимации
data-wow-delay: Задержка перед запуском анимации
data-wow-offset: Расстояние до начала анимации (связанное с нижней частью браузера)
data-wow-iteration: Количество повторений анимации
<section class="wow animate__animated animate__slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow animate__animated animate__slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>UPD параметры анимации не обязательно добавлять в HTML, их можно прописать в CSS для анимируемых элементов, например:
.item-animated {
animation-duration: 2s;
animation-delay: 5s;
animation-iteration-count: 10;
}Например, такие правила, чтобы анимируемые элементы в одном ряду плавно появились друг за другом, а не одной пачкой:
.item:first-child {
animation-delay: 0.1s;
}
.item:nth-child(2) {
animation-delay: 0.2s;
}
.item:nth-child(3) {
animation-delay: 0.3s;
}Настройка параметров
boxClass: Имя класса, которое показывает скрытый блок при прокрутке страницы пользователем.
animateClass: Имя класса, которое запускает анимацию CSS (animated по умолчанию для библиотеки animate.css версии 3.0 и animate__animated по умолчанию для библиотеки animate.css версии 4.0+)
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();Для animate.css версии 4.0+ animateClass должен быть animate__animated:
animateClass: animate__animated;
=============
Дополнительные настройки:
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 анимацию
offset: Определяет расстояние между нижней частью окна браузера и верхней частью скрытого окна. Когда страница прокручивается и достигает этого расстояния, открывается скрытое поле и запускается анимация.
mobile: Включает и выключает WOW.js на мобильных устройствах.
live: Действие с асинхронно загруженным содержимым.
По умолчанию:
wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
})
wow.init();