JavaScript

в Javascript, Верстка, Программирование

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

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

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

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

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

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

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

<link rel="stylesheet" href="fm.revealator.jquery.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="fm.revealator.jquery.js"></script>

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

<div class="revealator-zoomin">
	Тут какой-нибудь текст или элемент
</div>

<div class="revealator-fadein revealator-slideup revealator-once revealator-delay2 revealator-duration5">
	Тут какой-нибудь текст или элемент
</div>

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

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

Эффекты

КлассОписание
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##

Вам может быть интересно:

Полезный текст? Поделись с друзьями!

Оставить комментарий

Комментарии