Подключение и настройка эффектов анимации при скроллинге

< rel="stylesheet" href="/anijs/anicollection.css" />

Перед закрывающим тегом </body> добавьте плагины управления эффектами.

<script src="//atmpl.ru/design/scroll-effect/2015/anijs/anijs.js"></script>
<script src="//atmpl.ru/design/scroll-effect/2015/anijs/anijs-helper-scrollreveal.js"></script>

Описание настроек эффектов Ani.JS

Настройка эффектов осуществляется путём определений data-anijs="if, on, do, to".

Так же могут использоваться расширенные определения before, after, helper.
Определение if: (значение) – полный список определений можно получить здесь.

if: blurЕсли элемент потеряет фокусif: clickЕсли кнопка была нажата и отпущенаif: dblclickЕсли кнопка нажимается дваждыif: focusЕсли элемент получил фокусif: loadПри загрузке элемента или страницы – (требуется UI)if: mousedownПри нажатии на элементif: resizeПри изменении размеров элемента – (требуется UI)if: scrollПри скроллинге элемента или страницы – (требуется UI)if: selectПри выделении текста – (требуется UI)if: wheelПри прокрутке колёсика мышки

Определение on: (значение) – зона применения к элементам или селекторам CSS.

on: window

Зона документа страницы

on: .селектор

Зона элемента с указанным селектором CSS

Определение do: (эффект) здесь нужно указать название эффекта (по умолчанию применяются имена эффектов Animate.css) – полный список эффектов можно получить здесь, Вы можете создать свой эффект и указать его имя. Возможно определить объект для присвоения имени.

do: bounceOut animated

Как пример применения эффекта bounceOut + основной селектор эффектов Animate.css

do: $addClass active

Как пример применения добавляемому классу в активном состоянии

Определение to: (значение) определяет элементы, затронутые в ответ действие или анимацию (не обязательное использование).

to: table

Затронет все таблицы

Расширенное определение before: (значение) определяет действия элемента до начала анимации.

before: scrollReveal

Анимация начнётся при появлении в зоне видимости сраницы

Расширенное определение after: (значение) определяет действия элемента после завершения анимации.

after: removeAnim

Удаляем анимацию после её воспроизведения

Расширенное определение helper: (значение) определяет действия помошника (не обязательное использование).

Примеры реального использования настроек

После загрузки страницы сработает эффект slideInDown для заголовка.

<h1 data-anijs="if: load, on: window, do: slideInDown animated, before: scrollReveal, after: removeAnim">Эффект анимации</h1>

При скроллинге страницы сработает эффект slideInDown для заголовка.

<h1 data-anijs="if: scroll, on: window, do: slideInDown animated, before: scrollReveal, after: removeAnim">Эффект анимации</h1>

После загрузки страницы сработает эффект slideInDown для заголовка, при скроллинге, появившись в зоне видимости он так же сработает.

<h1 data-anijs="if: load, on: window, do: slideInDown animated, before: scrollReveal, after: removeAnim; if: scroll, on:window, do: slideInDown animated, before: scrollReveal, after: removeAnim">Эффект анимации</h1>

После загрузки страницы сработает эффект pulse для заголовка, и будет бесконечно повторяться благодаря значению infinite.

<h1 data-anijs="if: load, on: window, do: pulse animated infinite">Эффект анимации</h1>

Обратите внимание! Если используется одно условие то в конце не ставится точка с запятой (;), но при разделении двух условий, после первого должно быть разделение (;).

Демо эффектов анимации Ani.JS

Источник