0
764
2019-01-17

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

Я достаточно часто использую анимацию на одностраничных сайтах для появления блоков при прокрутке страницы, данная анимация придает динамичность и впечатляющий эффект. Рассмотрим создание анимации элементов, при помощи плагина fm.revealator.jquery.js
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

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

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

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">
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="fm.revealator.jquery.js"></script>
  2. Укажите тип эффекта, который вы хотите применить к элементу, когда он появляется.

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

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

<div class="revealator-slideup">
    Slideup effect
</div>
  1. Настройте продолжительность и задержку анимации.

    <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