Анимация элементов

В Albireo CMS есть несколько вариантов анимации.

Анимация Berry CSS

Для простой анимации HTML-элементов есть классы Berry CSS.

Для её использования достаточно просто указать 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: +

В некоторых случаях, для того чтобы убрать «мигание» блоков анимации, может потребоваться указать дополнительное css-правило для класса wow:

css.style[]: .wow {visibility: hidden;}

Это изначально скроет элемент, а после инициализации WOW.js автоматически поменяет visibility на visible при запуске анимации, так что это не помешает самой анимации.

Анимация AlpineJS

AlpineJS поддерживает директиву x-transition через которою можно управлять разными визуальными эффектами. Например сокрытие блока:

<div x-data="{isVisible: true}" x-show="isVisible" x-transition.duration.500ms @click="isVisible = false" class="pad20 mar20-tb cursor-pointer bg-primary50 hover-bg-primary100" title="Click to close...">
    Lorem ipsum dolor sit amet (нажмите, чтобы скрыть блок)
</div>

Либо иконку закрытия вынести отдельно (в родительнский блок нужно добавить класс pos-relative):

<div x-data="{isVisible: true}" x-show="isVisible" x-transition.duration.500ms class="pos-relative pad20 mar20-tb bg-primary50">
    <span @click="isVisible = false" class="cursor-pointer pos-absolute pos10-t pos10-r" title="Close">❌</span>
    
    Lorem ipsum dolor sit amet
</div>