Начну с того что данная анимация должна применяться не на всех подряд сайтах, а так же не советую применять анимацию для главного экрана страницы.
Главный экран - сразу появляющаяся верхняя часть страницы при загрузке сайта.
Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид веб проекту. Главное не "пихать" анимацию с "фанатизмом".
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 в конец документа.
<link rel="stylesheet" href="fm.revealator.jquery.css"> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="fm.revealator.jquery.js"></script>
Укажите тип эффекта, который вы хотите применить к элементу, когда он появляется.
revealator-fade revealator-rotateleft revealator-rotateright revealator-slideleft revealator-sliderightt revealator-slideup revealator-ZoomIn revealator-ZoomOut
Что бы в верстке объект выглядел прмерно так:
<div class="revealator-slideup">
Slideup effect
</div>
Настройте продолжительность и задержку анимации.
<div class="revealator-slideup revealator-duration10 revealator-delay1"> Slideup effect Duration: 1000ms Delay: 100ms </div>
Параметры jQuery плагина Revealator
Основные классы для присваивания их обекту для его анимации.
Показывать эффект анимации только один раз
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
Полезные ссылки
Глянуть на работу плагина в живую
jQuery-Revealator готовый пример применения
Так же не плохой пример от колеги по цеху
Revealator страница на GitHub
https://github.com/QODIO/revealator