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.
Краткая инструкция по работе с плагином
- Загрузите таблицу стилей 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
Полезные ссылки
Глянуть на работу плагина в живую
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