Эффекты при скроллинге ▼ ▲ | Ani.Js & Animate.css

Скролл эффекты ani.js & animate.css

Эффекты скроллинга при прокрутке страницы вверх и вниз, используется мощный плагин ani.js работающий на эффектах анимации CSS - Animate.css, описание подключение, настройка и демо использования.

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

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

На страницах, на которых будут работать эффеты анимации добавьте в зону <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

Нажмите на значок выполнения для просмотра демо результата.


Рейтинг: 4.2/5 из 16



Добавлено Автор Ник Источник Просмотров Комментариев Теги
23-05-2015 Михаил Меренков aTmpl © 3252 0 Scroll, animate.css, effect, ani.js, скролла, Эффекты