Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид веб проекту. Главное не “пихать” анимацию с “фанатизмом”.

Revealator

Revealator – это простой плагин анимации, запускаемый из области просмотра, который анимирует любые элементы с помощью пользовательских эффектов CSS3 при их прокрутке в окне просмотра.

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

Особенности

Определяет, находится ли элемент в области просмотра, и добавляет к нему класс
8 встроенных анимаций на основе анимации CSS3.
Вы можете добавить свои собственные эффекты, используя CSS3.
Пользовательская продолжительность анимации и задержка.

Как работает плагин

Плагин Revealator состоит из двух основных файлов:

fm.revealator.jquery.css – CSS стили эффектов,

fm.revealator.jquery.js – скрипт.

Для работы плагина, необходимо наличие подключенной библиотеки jQuery.

Краткая инструкция по работе с плагином

Загрузите таблицу стилей fm.revealator.jquery.css в head раздел и fm.revealator.jquery.js в конец документа.

Укажите тип эффекта, который вы хотите применить к элементу, когда он появляется.


revealator-fade
revealator-rotateleft
revealator-rotateright 
revealator-slideleft 
revealator-sliderightt
revealator-slideup
revealator-ZoomIn
revealator-ZoomOut

Что бы в верстке объект выглядел примерно так:


revealator-once

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Анимация

Обычное появление элемента


revealator-fade

Появление элемента с легким поворотом влево


revealator-rotateleft

Появление элемента с легким поворотом вправо


revealator-rotateright

Появление элемента слайдом справа на лево


revealator-slideleft

Появление элемента слайдом слева на право


revealator-slideright

Появление элемента слайдом снизу на вверх


revealator-slideup

Появление элемента с эффектом увеличения от большого к меньшему


revealator-zoomin

Появление элемента с эффектом увеличения от меньшего к большему


revealator-zoomout

Задержка:

Установить задержку эффекта на 100ms


revealator-delay1

Установить задержку эффекта на 200ms


revealator-delay2

Установить задержку эффекта на 300ms


revealator-delay3

Установить задержку эффекта на 1900ms


revealator-delay19

Установить задержку эффекта на 2000ms


revealator-delay20

Продолжительность:

Установить длительность эффекта на 100ms


revealator-duration1

Установить длительность эффекта на 200ms


revealator-duration2

Установить длительность эффекта на 300ms


revealator-duration3

… … Установить длительность эффекта на 1900ms


revealator-duration19

Установить длительность эффекта на 2000ms


revealator-duration20

Полезные ссылки