Анимация появления элементов с помощью Revealator

JavaScript

В данной статье мы рассмотрим как можно добавить различную анимацию появления для любого элемента на странице с помощью плагина Revealator.

На Landing page (посадочных страницах) часто можно заметить анимацию появления различных блоков. Это выглядит достаточно динамично и привлекательно.

Самый простой способ добавить анимацию на страницу — это использовать плагин jQuery под названием Revealator. Подключив данный плагин, нам останется лишь указывать классы с названием анимации, которая нам необходима.

Подключение плагина Revealator

Для начала необходимо скачать последнюю версию с GitHub и распаковать в папку с вашим проектом.

Затем необходимо подключить плагин к вашему проекту, добавив следующий код между тегами :



Пример использования:

Тут какой-нибудь текст или элемент
Тут какой-нибудь текст или элемент

Все эффекты вы можете просмотреть на демонстрационной странице.

Эффекты, задержки и длительность анимации по умолчанию

Эффекты

КлассОписание
revealator-fade Простое появление объекта
revealator-rotateleftПоявление с легким поворотом влево
revealator-rotaterightПоявление с легким поворотом вправо
revealator-slideleft Появление со скольжением справа налево
revealator-slideright Появление со скольжением слева на право
revealator-slideup Появление со скольжением снизу вверх
revealator-zoomin Появление с эффектом увеличения
revealator-zoomout Появление с эффектом уменьшения

Задержки

КлассОписание
revealator-delay1Установить задержку анимации 100мс
revealator-delay3 Установить задержку анимации 200мс
revealator-delay4 Установить задержку анимации 300мс
revealator-delay19 Установить задержку анимации 1900мс
revealator-delay20 Установить задержку анимации 2000мс

Длительность анимации

КлассОписание
revealator-duration1Длительность анимации 100мс
revealator-duration2 Длительность анимации 200мс
revealator-duration3 Длительность анимации 300мс
revealator-duration19 Длительность анимации 1900мс
revealator-duration20 Длительность анимации 2000мс
Можно использовать
revealator-speed##