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

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

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

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

Revealator

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

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

Особенности

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

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

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

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

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

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

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

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

   <link rel="stylesheet" href="fm.revealator.jquery.css"><br /><script src="//code.jquery.com/jquery-1.12.0.min.js"></script><br /><script src="fm.revealator.jquery.js"></script><br />

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

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

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

<div class="revealator-slideup">
 Slideup effect
</div>

3. Настройте продолжительность и задержку анимации.

   <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

Загрузить Revealator

Источник записи: https://techblog.sdstudio.top/blog/javascript-animaciya-poyavleniya-blokov-dlya-landing-page-i-ne-tolko-pri-pomoshi-fmrevealatorjqueryjs