Шаблон MF 11.0

Анимация

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

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

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

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

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

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

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

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

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

Example

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

Анимация по js-событиям (доступно с MF 10)

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

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

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

Анимация для мыши (работало до MF 11)

Если требуется создать анимацию, которая сработает только при наведении на элемент, то используется класс hover-animation. При этом данные анимации записываются в отдельном data-атрибуте data-animation:

<h1 class="t-center hover-animation" data-animation="tada">Hover me</h1>

Аналогичным образом создается анимация, которая сработает по клику — это класс click-animation:

<h1 class="t-center click-animation" data-animation="swing">Click me</h1>

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

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

Scroll me

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 автоматически подключается в шаблоне MF и уже готова к использованию.

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

В комплект MF включена библиотека 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>