Очень часто можно наблюдать на одностраничных сайтах или Landing Page анимированное появление блоков при скролле страницы. Это выглядит красиво и запоминающимся, а также придает сайту особенность.
В данной статье я хотел бы рассказать как сделать анмириванное появление блоков при прокрутке сайта. Если быть конкретнее, я расскажу про jQuery плагин Revealator. Данный плагин очень просто в использовании. По сути, вы на нужные блоки навешиваете классы, тем самым определяя как они будут появляться в окне браузера
Как работает плагин Revealator ?
Сам плагин включает в себя всего 2 файла:
— fm.revealator.jquery.css — стили ;
— fm.revealator.jquery.js — скрипт.
Их надо подключить перед закрывающим тэгом </head> .
Пример :
|
1 2 3 4 5 6 |
<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, иначе работать не будет!
Теперь когда вы все подключили, можно навешивать классы на блоки, которые вы хотите сделать с анимированным появлением. Пример одной секции вы можете посмотреть ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!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 |
Оставьте ответ