Анимация элементов
В Albireo CMS есть несколько вариантов анимации.
Анимация Berry CSS
Для простой анимации HTML-элементов есть классы Berry CSS.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nisi placeat non sunt atque deserunt cum blanditiis assumenda vitae!
animation-ping
animation-spin
animation-pulse
Для её использования достаточно просто указать css-класс, например:
h3(animation-fade) Lorem ipsum dolor sit amet
Анимация по js-событиям
Привязывает произвольную анимацию к js-событиям на элементе. Например, если нужно анимировать клик на кнопке:
<button class="button" onclick="this.animate('animation-bounce')">Click Me</button>
В данном примере класс анимации animation-bounce сработает по событию onclick.
Использование Animate.css
Библиотека Animate.css содержит большое количество анимационных эффектов. Для её использования нужно указать у страницы:
use.animate: +
После этого будут доступны все классы этой библиотеки. Обратите внимание, что анимация здесь указывается в виде нескольких классов, например:
Lorem ipsum dolor sit amet
h3(animate__animated animate__flipInX animate__delay-2s animate__repeat-3) Lorem ipsum dolor sit amet
Использование Wow.js
Библиотека Wow.js отслеживает появление элемента на экране при скроллинге и включает его анимацию. Часто такая анимация используется в лендингах.
Для такого эффекта нужно указать класс wow и одиночный класс анимации:
h3(wow animate__backInRight) Scroll me h3(wow animate__backInLeft) Scroll me h3(wow animate__zoomInRight) Scroll me h3(wow animation-fade) Scroll me
и подключить Wow.js:
use.wow: +