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

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

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

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

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

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

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

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

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

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

Пример :

<link rel="stylesheet" href="revealator/fm.revealator.jquery.css">
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="revealator/fm.revealator.jquery.js"></script>

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

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

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Revealator Plugin</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="fm.revealator.jquery.css">
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/fm.revealator.jquery.js"></script>
   </head>
   <body>
      <div class="section1">
		<div class="label">
			revealator-slideup revealator-delay#
		</div>
		<div class="revealator-slideup revealator-once revealator-partially-above revealator-within">
		<img src="http://cdn.rcmart.com/images/pandora-rc-pab-157-7.jpg">
			Imma slide this in
		</div>
		<div class="revealator-slideup revealator-delay1 revealator-once revealator-partially-above revealator-within">
		<img src="http://cdn.rcmart.com/images/pandora-rc-pab-157-7.jpg">
			Imma slide this in
		</div>
		<div class="revealator-slideup revealator-delay2 revealator-once revealator-partially-above revealator-within">
		<img src="http://cdn.rcmart.com/images/pandora-rc-pab-157-7.jpg">
			Imma slide this in
		</div>
		<div class="revealator-slideup revealator-delay3 revealator-once revealator-within">
		<img src="http://cdn.rcmart.com/images/pandora-rc-pab-157-7.jpg">
			Imma slide this in
		</div>
	</div>
</body>
</html>

Если вы хотите посмотреть полностью пример со всеми на стройками, вы можете перейти на страницу ДЕМО , нажать там сочетание клавиш 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

*