Как сделать плавное появление блока js
Добавил пользователь Morpheus Обновлено: 04.10.2024
На одностраничных сайтах часто применяют анимацию появления блоков при прокрутке страницы, создавая динамичность и впечатляющий эффект. На самом деле это очень красиво выглядит, если только без фанатизма, не перезагружая сайт.
В этом обзоре мы рассмотрим 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 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.
На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.
Начну с того что данная анимация должна применяться не на всех подряд сайтах, а так же не советую применять анимацию для главного экрана страницы.
Главный экран – сразу появляющаяся верхняя часть страницы при загрузке сайта.
Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид веб проекту. Главное не “пихать” анимацию с “фанатизмом”.
Revealator
Revealator – это простой плагин анимации, запускаемый из области просмотра, который анимирует любые элементы с помощью пользовательских эффектов CSS3 при их прокрутке в окне просмотра.
В этом посте мы рассмотрим jQuery плагин Revealator, при помощи которого Вы сможете реализовать красивую анимацию блоков, почти не вдаваясь в детали разработки cкрипта. Все что вам нужно будет сделать это подставить определенные классы предоставленные revealator к элементам которые Вы хотите анимировать, чтобы те, в свою очередь, появлялись в области просмотра браузера с эффектом, закрепленным под тем или иным классом.
Особенности
- Определяет, находится ли элемент в области просмотра, и добавляет к нему класс
- 8 встроенных анимаций на основе анимации CSS3.
- Вы можете добавить свои собственные эффекты, используя CSS3.
- Пользовательская продолжительность анимации и задержка.
Как работает плагин
Плагин Revealator состоит из двух основных файлов:
fm.revealator.jquery.css – CSS стили эффектов,
fm.revealator.jquery.js – скрипт.
Для работы плагина, необходимо наличие подключенной библиотеки jQuery.
Краткая инструкция по работе с плагином
- Загрузите таблицу стилей fm.revealator.jquery.css в head раздел и fm.revealator.jquery.js в конец документа.
Что бы в верстке объект выглядел примерно так:
При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.
Уже давно вошло в моду применять на Landing Page анимацию появления блоков при скроллинге страницы. Если этим не злоупотреблять, то красивые эффекты помогут сделать сайт интересней.
В этом уроке мы реализуем анимацию используя jQuery плагин Revealator. Первым делом его нужно скачать и подключить:
Теперь осталось обернуть наши div блоки в нужный класс.
Параметры 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-delay20 | Установить задержку эффекта на 2000ms |
Продолжительность
| Класс | Описание |
|---|---|
| revealator-duration1 | Установить длительность эффекта на 100ms |
| revealator-duration2 | Установить длительность эффекта на 200ms |
| . | . |
| revealator-duration20 | Установить длительность эффекта на 2000ms |
При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.
Отлично было бы это сделать, но на данный момент это невозможно и, думаю, никогда не станет реальностью (например, как анимировать до “display: table”?). Но есть возможность совершить обходной маневр, и один из них я здесь и опишу.
Зачем анимировать “display”?
Анимировать свойство display требуется для решения следующей проблемы:
Нужно, чтобы элемент постепенно зрительно исчезал со страницы.
Вам нехочется, чтобы этот элемент занимал место после своего исчезновения (например, требуется, чтобы его исчезновение вызывало перезаливку).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Нужно применять для анимации CSS, а не библиотеку.
По этой причине недостаточно просто анимировать opacity до нуля, так как элемент с нулевой непрозрачностью занимает то же самое место на странице. Давайте посмотрим, как шаг за шагом решить эту проблему.
Используйте Opacity и Display
Первое, о чем вы можете подумать – воспользоваться и свойством opacity, и display. Наш HTML будет выглядеть так:
Обратите внимание на то, что display: none и opacity: 0 присвоен класс “hidden”. Если переключать класс “hidden” с помощью jQuery, получится примерно такой код:
Но если так сделать, то мы не увидим эффекта перехода (определенного в блоке описаний .box). Вместо него мы увидим это (слегка отличающееся в Firefox по сравнению с Chrome/IE10):
Затем можно переключить оба класса, один за другим:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Помимо того, что требуется реверсировать эти две строки при появлении блока, это еще и не сработает, как видно здесь:
Нам нужно, чтобы элемент визуально исчезал, а затем удалялся со страницы по окончанию исчезновения идентично функции обратного вызова. (Кроме того, даже если мы скомбинируем opacity: 0 с visibility: hidden, то анимация получится хорошо, но элемент после своего исчезновения продолжит занимать место на странице, так что все это не сработает.)
Почему не работает?
До перехода к своему методу я просто объясню, почему невозможно ничего сделать, просто изменяя классы один за другим. Во-первых, если вы добавляете классы как в вышеприведенных примерах, и если переход даже сработал, то вам придется установить отдельный раздел для удаления классов и реверсирования (т.е. если блок сначала скрыт, вам придется установить его на display: block, а затем сменить непрозрачность).
Но это несущественно, потому что все равно не работает. JavaScript выполняет одну строку за другой, но не ждет, пока закончат выполняться все связанные с ней процессы, а переходит к выполнению следующей строки. (Другими словами, если в строке 1 вы выполняете анимацию или другое несинхронное событие, строка 2 будет исполняться, даже если анимация не выполнена).
Это происходит от того, что непрозрачность ‘opacity’ пытается анимироваться сразу же, и даже если на долю миллисекунды она действительно анимируется, вы этого не увидите, потому что display: none начнет действовать столь же быстро.
Можно резюмировать проблему, которую нам нужно решить, следующим образом:
Когда элемент виден, сначала анимируйте непрозрачность, а затем, когда это выполнено, сделайте его display: none.
Когда элемент невидим, сначала сделайте его display: block, затем (пока он еще визуально скрыт, но уже существует на странице), анимируйте непрозрачность.
Возможное решение
Вероятно, существуют другие способы это сделать, и я буду рад узнать, как вы бы решили эту проблему. Но вот мое мнение.
CSS тот же самый (с двумя все еще разделенными классами ‘hidden’), но jQuery будет выглядеть так:
Недавно один из моих подписчиков спросил, как добавить эффект затухания для последнего виджета в сайдбаре. Хочу заметить, что это популярный эффект jQuery, применение которого можно увидеть на многих знаменитых блогах и сайтах.
Суть его следующая: пользователь прокручивает страничку и по мере этого последний виджет сайдбара то исчезает, то появляется.
Такая анимация, грубо говоря, цепляет взгляды пользователей – блок становится в хорошем смысле слова броским и заметным, а это уже благотворно влияет на показатель кликабельности (CTR).
Итак, в этой статье я расскажу о том, как сделать плавное появление последнего блока виджета сайдбара с помощью jQuery.
Вот демонстрация того, как это выглядит на практике:
В данном руководстве я также научу вас, как сделать модификацию файлов темы сайта. И прежде чем к этому приступить настоятельно рекомендую сделать бэкап файлов темы.
Шаг № 1: Добавление JavaScript для эффекта плавного появления блока
Прежде всего, необходимо добавить в тему вордпресса jQuery код в виде отдельного файла JavaScript. Для этого: создайте пустой файл в любом текстовом редакторе, например в Блокнот, сохраните его на компьютере под именем wpb_fadein_widget . js и вставьте в него следующий код (см. ниже) и еще раз сохраните изменения.
Это идентификатор блока (div), содержащего ваш сайдбар.
Так как у каждой темы могут быть свои различные блоки для сайдбаров, необходимо найти идентификатор блока, который в вашей теме относится к данному сайдбару.
Вам надо будет заменить secondary на идентификатор дива, соответствующий вашему сайдбару.
Читайте также: