UPD – код для анимации обновлен, из-за обновления структуры Animate.css
Используем библиотеку WOW.js документация здесь.
Подключаем анимацию с помощью 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>
UPD В версии 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();
UPD Для animate.css версии 4.0+ animateClass должен быть animate__animated:
animateClass: animate__animated;
Пример работы библиотеки WOW.js для анимации HTML-элементов:
0
UPD Большой апдейт – унифицируем код для анимации
Рассмотрим пример, когда у нас есть большой сайт с большим количество страниц и шаблонов, в которые мы не можем просто начать дописывать нужные классы для анимации, или параметры для продолжительности анимации, например, потому что элементы в шаблоне строятся в цикле, и нет физической возможности каждому прописать свои параметры с определенным шагом. Надеюсь, суть понятна.
Но было бы совсем идеально, чтобы для анимированных элементов можно было добавить какой-то общий класс, к которому можно было бы потом подвязать анимацию.
Строим примитивный пример для познания.
HTML. Все классы примитивны и не являются обязательными, задача – понять логику анимации.
<div class="row row-1">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
CSS. Пример правил для анимированных элементов, классы могут быть любые
.col {
visibility: hidden; /* for animated elements */
}
.col:first-child {
animation-delay: 0.1s;
}
.col:nth-child(2) {
animation-delay: 0.2s;
}
.col:nth-child(3) {
animation-delay: 0.3s;
}
.col:nth-child(4) {
animation-delay: 0.4s;
}
visibility: hidden; – обязательно для элементов, которые будут анимироваться
animation-delay – с шагом в 0.1s чтобы элементы в одном ряду появились плавно с небольшой задержкой.
Пример миксина для SCSS, если вы знаете, что элементов не более 12
@mixin animation-delay {
@for $i from 1 through 12 {
&:nth-child(#{$i}) {
animation-delay: calc(0.1s * (#{$i} - 1));
}
}
}
Использование миксина
.col {
@include animation-delay;
}
В сгенерированном CSS мы получим правила для 12 дочерних элементов с задержкой анимации с шагом в 0.1s.
JS – запускаем анимацию
Подключаем jQuery для того, чтобы запустить скрипт после загрузки страницы:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Подключаем либу wow.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
Код скрипта:
(function () {
// make any elements animated by class
$('.row-1 .col').addClass('wow animate__animated animate__fadeInUp');
$('.row-2 .col').addClass('wow animate__animated animate__zoomIn');
$('.row-3 .col').addClass('wow animate__animated animate__fadeInRight');
// activate wow.js
new WOW().init();
})();
Можно чуть улучшить скрипт – убрать из DOM class animate__animated, но указать его в параметрах WOW:
(function () {
// make any elements animated by class
$('.row-1 .col').addClass('wow animate__fadeInUp');
$('.row-2 .col').addClass('wow animate__zoomIn');
$('.row-3 .col').addClass('wow animate__fadeInRight');
// activate wow.js
wow = new WOW({
animateClass: 'animate__animated',
});
wow.init();
})();
Скрипт wow.min.js добавляет класс animate__animated к элементам, которые мы анимируем и потом после анимации убирает его.
Пример анимации с помощью WOW.js + Animate.css для HTML-элементов:
0