Шаблон MF 9.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).

Анимация для мыши

Если требуется создать анимацию, которая сработает только при наведении на элемент, то используется класс 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

<h3 class="t-center wow bounceInUp">Scroll</h3>

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