Анимация

Можно использовать классы анимации из Berry CSS. Если этого не хватает, то с помощью библиотеки Animate.css, которая включает 77 готовых эффектов.

Использование Animate.css

Для того, чтобы задействовать эту css-анимацию на сайте нужно в Настройках шаблона — CSS профили включить файл animate-lazy.css.

Анимация задаётся с помощью базового класса animated и класса конкретной анимации (например bounce).

Вспомогательные классы delay- указывают на задержку срабатывания:

delay-1s - задержка 1s
delay-2s - задержка 2s
delay-3s - задержка 3s
delay-4s - задержка 4s
delay-5s - задержка 5s

Также можно указать время анимации:

slow - 2s
slower - 3s
fast - 800ms
faster - 500ms
infinite - бесконечная анимация

Например такой код:

<h1 class="t-center animated infinite bounce delay-2s">Example</h1>

Создаст бесконечную анимацию:

Example

Обратите внимание, что анимация применяется только к блочным элементам (для строчных нужно добавить класс b-inline).

Анимация по js-событиям

Привязывает произвольную анимацию к js-событиям на элементе. Например, если нужно анимировать клик на кнопке:

<button class="button button1" onclick="this.animate('animation-bounce')">Click Me</button>

В данном примере класс анимации animation-bounce сработает по событию onclick.

Использование Wow.js

Также можно задать анимацию, которая сработает только когда блок окажется в области видимости браузера. Для этого используется специальный класс wow и класс анимации:

Scroll me

<h3 class="t-center wow bounceInDown" data-wow-delay="1s">Scroll me</h3>
<h3 class="t-center wow animation-zoom" data-wow-delay="1s">Scroll me</h3>

Класс wow срабатывает только один раз, после чего анимация завершается. При необходимости вы можете использовать дополнительные data-атрибуты, описанные на странице документации.

Библиотека Wow.js автоматически подключается в шаблоне и уже готова к использованию.

Использование Anime.js

В комплект шаблона включена библиотека Anime.js для создания произвольной анимации. Больше информации приведено в статье Библиотека для анимации Anime.js

Использование AOS.js

Вместо библиотеки WOW.js можно использовать AOS.js, которая имеет несколько больше возможностей. Для этого в файле модуля нужно подключить js-файл библиотеки и выполнить её инициализуцию.

<?php 
	mso_add_file('assets/js/aos.js');
?>

<script>
document.addEventListener("DOMContentLoaded", function () {
	AOS.init({
		useClassNames: true,
  		initClassName: false,
  		animatedClassName: 'animated',
	});
});
</script>

После этого можно использовать классы анимации (от Berry CSS или Animate.css) в data-aos:

<div data-aos="animation-zoom animation-slow" data-aos-offset="50">Scroll me</div>