Очень часто можно наблюдать на одностраничных сайтах или Landing Page анимированное появление блоков при скролле страницы. Это выглядит красиво и запоминающимся, а также придает сайту особенность.
В данной статье я хотел бы рассказать как сделать анмириванное появление блоков при прокрутке сайта. Если быть конкретнее, я расскажу про jQuery плагин 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 |
Оставьте ответ