На одностраничных сайтах часто применяют анимацию появления блоков при прокрутке страницы, создавая динамичность и впечатляющий эффект. На самом деле это очень красиво выглядит, если только без фанатизма, не перезагружая сайт.
В этом обзоре мы рассмотрим jQuery плагин Revealator, который поможет реализовать анимацию блоков самым легким путем. Практически просто подставляя определенные классы элементам, чтобы те, в свою очередь, появлялись в области просмотра браузера с эффектом, закрепленным под тем или иным классом.
Параметры jQuery плагина 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 |
Показывать эффект только один раз
При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.
Как это работает?
Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.
Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами <head></head> уже подключено 4 файла: два из них относится к плагину, библиотека 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">
<h1>
↓↓↓ Scroll down ↓↓↓
</h1>
</div>
<div class="section2">
<div class="label">
revealator-slideup revealator-delay#
</div>
<div class="revealator-slideup revealator-once">
<img src="img/portfolio-5.jpg">
Imma slide this in
</div>
<div class="revealator-slideup revealator-delay1 revealator-once">
<img src="img/portfolio-5.jpg">
Imma slide this in
</div>
<div class="revealator-slideup revealator-delay2 revealator-once">
<img src="img/portfolio-5.jpg">
Imma slide this in
</div>
<div class="revealator-slideup revealator-delay3 revealator-once">
<img src="img/portfolio-5.jpg">
Imma slide this in
</div>
</div>
<div class="section3">
<div class="label">
revealator-slidedown revealator-once revealator-delay#
</div>
<div class="revealator-slidedown revealator-once revealator-once">
<img src="img/portfolio-1.jpg">
Imma slide this in
</div>
<div class="revealator-slidedown revealator-once revealator-delay1 revealator-once">
<img src="img/portfolio-1.jpg">
Imma slide this in
</div>
<div class="revealator-slidedown revealator-once revealator-delay2 revealator-once">
<img src="img/portfolio-1.jpg">
Imma slide this in
</div>
<div class="revealator-slidedown revealator-once revealator-delay3 revealator-once">
<img src="img/portfolio-1.jpg">
Imma slide this in
</div>
</div>
<div class="section4">
<div class="label">
revealator-slideleft revealator-delay#
</div>
<div class="revealator-slideleft revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in from right to left
</div>
<div class="revealator-slideleft revealator-delay2 revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in from right to left
</div>
<div class="revealator-slideleft revealator-delay4 revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in from right to left
</div>
<div class="revealator-slideleft revealator-delay6 revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in from right to left
</div>
</div>
<div class="section5">
<div class="label">
revealator-slideright revealator-delay#
</div>
<div class="revealator-slideright revealator-once">
<img src="img/portfolio-4.jpg">
Imma slide this in from left to right
</div>
<div class="revealator-slideright revealator-delay2 revealator-once">
<img src="img/portfolio-4.jpg">
Imma slide this in from left to right
</div>
<div class="revealator-slideright revealator-delay4 revealator-once">
<img src="img/portfolio-4.jpg">
Imma slide this in from left to right
</div>
<div class="revealator-slideright revealator-delay6 revealator-once">
<img src="img/portfolio-4.jpg">
Imma slide this in from left to right
</div>
</div>
<div class="section6">
<div class="label">
revealator-zoomin revealator-delay#
</div>
<div class="revealator-zoomin revealator-once">
<img src="img/portfolio-3.jpg">
Imma zoom this in
</div>
<div class="revealator-zoomin revealator-delay1 revealator-once">
<img src="img/portfolio-3.jpg">
Imma zoom this in
</div>
<div class="revealator-zoomin revealator-delay2 revealator-once">
<img src="img/portfolio-3.jpg">
Imma zoom this in
</div>
<div class="revealator-zoomin revealator-delay3 revealator-once">
<img src="img/portfolio-3.jpg">
Imma zoom this in
</div>
</div>
<div class="section7">
<div class="label">
revealator-zoomout revealator-delay#
</div>
<div class="revealator-zoomout revealator-once">
<img src="img/portfolio-2.jpg">
Imma zoom this out
</div>
<div class="revealator-zoomout revealator-delay1 revealator-once">
<img src="img/portfolio-2.jpg">
Imma zoom this out
</div>
<div class="revealator-zoomout revealator-delay2 revealator-once">
<img src="img/portfolio-2.jpg">
Imma zoom this out
</div>
<div class="revealator-zoomout revealator-delay3 revealator-once">
<img src="img/portfolio-2.jpg">
Imma zoom this out
</div>
</div>
<div class="section8">
<div class="label">
revealator-fade revealator-delay# revealator-duration10
</div>
<div class="revealator-fade revealator-duration10 revealator-once">
<img src="img/portfolio-1.jpg">
Imma fade this in
</div>
<div class="revealator-fade revealator-delay2 revealator-duration10 revealator-once">
<img src="img/portfolio-1.jpg">
Imma fade this in
</div>
<div class="revealator-fade revealator-delay4 revealator-duration10 revealator-once">
<img src="img/portfolio-1.jpg">
Imma fade this in
</div>
<div class="revealator-fade revealator-delay6 revealator-duration10 revealator-once">
<img src="img/portfolio-1.jpg">
Imma fade this in
</div>
</div>
<div class="section9">
<div class="label">
revealator-rotateleft revealator-delay#
</div>
<div class="revealator-rotateleft revealator-once">
<img src="img/portfolio-5.jpg">
Imma rotate this in to the left
</div>
<div class="revealator-rotateleft revealator-delay1 revealator-once">
<img src="img/portfolio-5.jpg">
Imma rotate this in to the left
</div>
<div class="revealator-rotateleft revealator-delay2 revealator-once">
<img src="img/portfolio-5.jpg">
Imma rotate this in to the left
</div>
<div class="revealator-rotateleft revealator-delay3 revealator-once">
<img src="img/portfolio-5.jpg">
Imma rotate this in to the left
</div>
</div>
<div class="section10">
<div class="label">
revealator-rotateright revealator-delay#
</div>
<div class="revealator-rotateright revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in to the right
</div>
<div class="revealator-rotateright revealator-delay1 revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in to the right
</div>
<div class="revealator-rotateright revealator-delay2 revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in to the right
</div>
<div class="revealator-rotateright revealator-delay3 revealator-once">
<img src="img/portfolio-2.jpg">
Imma slide this in to the right
</div>
</div>
<div class="section">
<div class="label">
End
</div>
</div>
</body>
</html>
На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.
Спасибо за статью! Плагин очень прост в установке и использовании и, в то же время, с его помощью можно создать зрелищную анимацию появления элементов.
Не за что. Плагин и правда, неплох.
Отличный плагин, очень облегчил жизнь блондинке, спасибо вам)))))))))))
Но есть одно но, эффект применяется только когда див с классом полностью весь в экране, у меня блоки довольно длинные и при скроле по якорям с меню, пользователь видит пустое окно, не хватает буквально чуток что бы нормально сработало. В связи с этим вопрос, может есть возможность настроить так что бы эффект проявлялся например при появлении 50% блока в окне?
Не за что! Попробуйте просто уменьшить высоту появляющих блоков, так чтоб они/он помещался в область скроллинга. Плагин не настолько гибкий в параметрах.
Marishke_Sun, в самом плагине, в начале есть две переменные scroll_padding, effects_padding поставте им отрицательные значения к примеру -500
опечатка у вас тут
Спасибо! Исправил.
Спасибо за плагин! Подскажите, а где можно подстроить величину смещения при прокурутке после которой начинается анимация?
Спасибо!
Не за что! А вот верхний комментарий, как раз должен помочь. Поиграйтесь с параметрами scroll_padding, effects_padding. Ставьте отрицательное значение (к примеру, -300) или положительное (к примеру, 300).
Доброе время суток, праблы на мобильной версии. не появляются блоки когда нужно. Есть какое-то решение для гаджетов, спасибо
Здравствуйте. Как-то проверял на айпаде, так вроде нормально, более менее. А вообще, лучше на мобильной версии подобный скрипт отключать. Но, а если сильно нужно, то можно использовать этот плагин wordsmall.ru/plaginy-dlya...dpress-sajt.html. Там все CSS и анимация должна работать корректно на всех устройствах. Да и саму анимацию можно будет сделать по круче.
Здравствуйте, подскажите пожалуйста, можно ли настроить плагин так, что бы эффект сработал при загрузке страницы до того, как пользователь будет скроллить?
Здравствуйте. Так какой тогда смысл такого плагина? И рекомендую лучше использовать плагин с эффектами на CSS. Комментарием выше я о нем говорил.
Добрый вечер у меня почему-то он сразу срабатывает а не при скролле до этого блока
Добрый. Смотрите параметры или демо скачайте, и посмотрите как там устроено.
Здравствуйте! Подскажите пожалуйста, что делать если часть элементов находиться уже на главной, т.е часть его видно без скролла и они должны появляться сразу, о остальные при прокрутке, плагин не срабатывает пока не прокрутишь мышкой?
Здравствуйте. Используйте лучше плагин Animate It!. Выше в комментариях я уже о нем говорил.
Добрый день,как можно отключить плагин на мобильных устройствах??
День добрый. Отключите подключение скрипта fm.revealator.jquery.js при определенном разрешении экрана.
аналогичная проблема с отключением на мобильных...
пробовала скрипт
не отключается...
может кто подсказать как корректно отключить скрипт? (я не так давно в разработке, с js вообще новичок)
Вот так можно
<script type="text/javascript"> if ($(window).width() > 520) { var script = document.createElement('script'); script.src = 'путь_скрипта'; document.head.appendChild(script); } </script> Но там еще и со стилями нужно будет повозиться.WordSmall,
Я отключил плагин Revealator на мобильном через css, js пока не изучал.
У меня установлен Revealator-slideup.
@media only screen and (max-width: 480px) { .revealator-fade, .revealator-slideup { transition: none; } .revealator-fade { opacity: 1; } .revealator-fade.revealator-within, .revealator-fade.revealator-partially-above, .revealator-fade.revealator-above { opacity: 1; } .revealator-slideup { transform: none; opacity: 1; } .revealator-slideup.revealator-within, .revealator-slideup.revealator-partially-above, .revealator-slideup.revealator-above { transform: none; opacity: 1; } }