JavaScript - Анимация появления блоков для Landing Page и не только при помощи fm.revealator.jquery.js

Содержание:

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

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

Главный экран - сразу появляющаяся верхняя часть страницы при загрузке сайта.

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

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

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