Подключение и настройка эффектов анимации при скроллинге
Подключение стилей и плагинов для работы эффектов
На страницах, на которых будут работать эффеты анимации добавьте в зону <head> стили CSS.
< rel="stylesheet" href="//atmpl.ru/design/scroll-effect/2015/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
Нажмите на значок выполнения для просмотра демо результата.