Анимированное появление блоков для Landing Page

Очень часто можно наблюдать на одностраничных сайтах или Landing Page анимированное появление блоков при скролле страницы. Это выглядит красиво и запоминающимся, а также придает сайту особенность.

В данной статье я хотел бы рассказать как сделать анмириванное появление блоков при прокрутке сайта. Если быть конкретнее, я расскажу про jQuery плагин Revealator. Данный плагин очень просто в использовании. По сути, вы на нужные блоки навешиваете классы, тем самым определяя как они будут появляться в окне браузера

ССЫЛКА НА ПЛАГИН REVEALATOR

ССЫЛКА НА ДЕМО

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

Сам плагин включает в себя всего 2 файла:

—  fm.revealator.jquery.css — стили ;

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

Их надо подключить перед закрывающим тэгом </head> . 

Пример :

Обратите внимание, перед подключением скрипт плагина, обязательно нужно подключить библиотеку jQuery, иначе работать не будет!

Теперь когда вы все подключили, можно навешивать классы на блоки, которые вы хотите сделать с анимированным появлением. Пример одной секции вы можете посмотреть ниже.

Если вы хотите посмотреть полностью пример со всеми на стройками, вы можете перейти на страницу ДЕМО , нажать там сочетание клавиш Ctr + U и посмотреть всю структуру HTML файла и то, как размещены классы.

Ниже вы можете ознакомиться с параметрами настройки данного плагина.

Если у вас остались вопросы, обязательно пишите их в комментарии и я на все вам отвечу.

И да, если данная статья вам понравилась, помогла или просто нужна помощь по внедрению, оставляйте свои комментарии.
А также чтобы не пропустить выхода новых статей подписывайтесь на наш telegram-канал и соц.сети

Параметры настройки плагина Revealator 

Класс Описание
revealator-fade Обычное появление элемента
revealator-rotateleft Появление элемента с легким поворотом влево
revealator-rotateright Появление элемента с легким поворотом вправо
revealator-slideleft Появление элемента слайдом справа на лево
revealator-slideright Появление элемента слайдом слева на право
revealator-slideup Появление элемента слайдом снизу на вверх
revealator-zoomin Появление элемента с эффектом увеличения от большого к меньшему
revealator-zoomout Появление элемента с эффектом увеличения от меньшего к большему

Задержка перед появлением:

Класс Описание
revealator-delay1 Установить задержку эффекта на 100ms
revealator-delay2 Установить задержку эффекта на 200ms
revealator-delay3 Установить задержку эффекта на 300ms
revealator-delay19 Установить задержку эффекта на 1900ms
revealator-delay20 Установить задержку эффекта на 2000ms

Продолжительность анимации:

Класс Описание
revealator-duration1 Установить длительность эффекта на 100ms
revealator-duration2 Установить длительность эффекта на 200ms
revealator-duration3 Установить длительность эффекта на 300ms
revealator-duration19 Установить длительность эффекта на 1900ms
revealator-duration20 Установить длительность эффекта на 2000ms

 

 

Оставьте ответ

comment-avatar

*