На страницах, на которых будут работать эффеты анимации добавьте в зону
<head> стили CSS.< 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>
Обратите внимание! Если используется одно условие то в конце не ставится точка с запятой (;), но при разделении двух условий, после первого должно быть разделение (;).