Как сделать появление блока при прокрутке

Добавил пользователь Евгений Кузнецов
Обновлено: 10.09.2024

Существует много различных библиотек, которые помогают нам, разработчикам реализовывать потрясающие эффекты анимации на странице прокрутки. Сегодня мы поковыряемся в настройках AOS, называемый также Animate on Scroll, это одна из таких библиотек. Она позволяет применять различные виды анимации к элементам, когда они в поле зрения экрана.

В этом уроке Вы узнаете о внутренней работе AOS, о том, как установить библиотеку и заставить ее работать. После того, как вы один раз попробуете, создание анимации в прокрутке для ваших сайтов будет легким.

Как установить библиотеку AOS

Подключаем стили и саму библиотеку: (исходники в конце урока)

Если лень загружать файлы на сервер:

Начало работы с AOS

После инициализации библиотеки все, что вам нужно сделать, это добавить некоторые конкретные атрибуты.

Чтобы использовать базовые анимации, вам просто нужно добавить data-aos = "animation_name" в ваши HTML-элементы.

Вот разметка нашего первого примера:

Помимо строки инициализации в предыдущем разделе, анимация элементов не требует от вас ничего другого.

Настройка анимации с помощью атрибутов данных AOS

data-aos-offset - . Его значение по умолчанию - 120 пикселей.
data-aos-duration - этот атрибут можно использовать для указания продолжительности анимации. Значение длительности может составлять от 50 до 3000 с шагом 50 мс. Поскольку продолжительность обрабатывается в CSS, использование меньших шагов или более широкий диапазон излишне увеличивало бы размер кода CSS. Этот диапазон должен быть достаточным для почти всех анимаций. Значение по умолчанию для этого атрибута - 400.
data-aos-easing - этот атрибут можно использовать для управления функцией синхронизации для анимации различных элементов. Возможные значения: линейный, легкодоступный и непринужденный.

Вы можете увидеть список всех принятых значений ниже:

Все возможные параметры:

fade
fade-up
fade-down

fade-left
fade-right
fade-up-right

fade-up-left
fade-down-right
fade-down-left

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right

zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

top-bottom
top-center
top-top
center-bottom
center-center

center-top
bottom-bottom
bottom-center
bottom-top

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back

ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic

ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

Обратите внимание, что двойной `[data-aos] [data-aos]` - это не ошибка, это трюк, чтобы сделать индивидуальные настройки более важными, чем глобальные, без необходимости писать !important

Изучение внутренних работ библиотеки AOS

Цель Animate on Scroll - обрабатывать логику и анимацию отдельно. Для этой цели логика написана внутри JavaScript, но анимация написана внутри CSS. Это разделение позволяет нам писать собственные анимации и модифицировать их на основе потребностей проекта в очень чистом и обслуживаемом рабочем процессе.

Библиотека отслеживает все элементы и их позиции. Таким образом, он может динамически добавлять или удалять класс .aos-animate на основе параметров, которые мы предоставили. Например, класс aos-animate удаляется всякий раз, когда элементы, к которым он применяется, выходят из окна просмотра. Однако, если элемент имеет значение data-aos-once , установленное в true, класс .aos-animate не будет удален из этого конкретного элемента, тем самым предотвращая любую анимацию при последующих событиях прокрутки, которые приводят элемент в действие.

AOS также применяет значение по умолчанию атрибутов к элементу

в документе HTML. Например, для упрощения данных будет установлено упрощение, а data-aos-duration - до 400.

Как я уже упоминал, библиотека применяет продолжительность анимации только в диапазоне от 50 до 3000 с шагом 50 мс. Это означает, что по умолчанию вы не можете иметь продолжительность анимации 225 мс. Однако вы можете добавить эту продолжительность самостоятельно с помощью CSS следующим образом:

Добавление вашей собственной анимации в AOS также довольно просто.

Просто создайте селектор атрибутов data-aos и настройте его на имя вашей пользовательской анимации.

Затем добавьте свойство, которое вы хотите оживить, с его начальным значением, а также свойство перехода, заданное именем свойства, которое вы хотите оживить.

Например, предположим, что ваша анимация называется rotate-c, и элемент, к которому он применяется, изначально поворачивается на -180 градусов.

Вот как выглядит CSS:

Чтобы установить заключительный этап анимации (в нашем примере это будет элемент, вращающийся от -180 градусов до 0 градусов), вы добавляете следующее правило CSS чуть ниже предыдущего:

Теперь добавьте data-aos = "rotate-c" в ваш выбранный элемент HTML, и это повернет по часовой стрелке (от -180 градусов до 0 градусов), когда пользователи прокрутят этот элемент в виде.

Больше возможностей

Библиотека AOS также предоставляет множество других функций, которые делают ее еще более гибкой и удобной для пользователя. Вместо того, чтобы предоставлять атрибуты для каждого элемента отдельно, вы можете передать их как объект функции init ().

Вот пример:

Вы также можете отключить анимацию на определенных устройствах или при определенных условиях с помощью ключа отключения и установить его значение для типа устройства, такого как мобильный, телефон или планшет. Кроме того, вы также можете отключить библиотеку с помощью функции.

Вот два примера для иллюстрации обеих функций:

Помимо init(), AOS также предоставляет две дополнительные функции: refresh () и refreshHard ().

Refresh() - используется для пересчета смещений и позиций всех элементов. Он вызывается автоматически при таких событиях, как изменение размера окна.

RefreshHard() - вызывается автоматически, когда новые элементы программно удаляются из DOM или добавляются в DOM. Таким образом, библиотека может поддерживать обновление элементов AOS. После обновления массива refreshHard() также запускает функцию refresh () для пересчета всех смещений.

Вывод

В этом уроке представлена библиотека Animate on Scroll, которую вы можете использовать для анимации элементов при прокрутке вверх или вниз по веб-странице.

Дорогой web-мастер.
Для меня очень важна обратная связь от Вас в виде лайков или рейтинга.
Пожалуйста оцените эту публикацию или поставь лайк за старание.

В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения — видимой части окна, с помощью Intersection Observer API.

Настройка CSS-анимации с помощью ключевых кадров

Начнем с создания CSS-анимации, которая определяется ключевыми кадрами @keyframes .

Анимацию можно назвать как угодно, пусть будет wipe-enter . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.

После того, как определены ключевые кадры, можно использовать анимацию для элемента, установив свойству animation-name название ключевых кадров: wipe-enter . Кроме этого необходимо установить animation-duration — продолжительность анимации и animation-iteration-count — счетчик итераций, указывающий, сколько раз анимация должна воспроизводиться, например — бесконечно.

В этом примере будет анимирован HTML-элемент квадратной формы:

Для CSS-анимации можно использовать сокращённое написание свойства animation , например:

Управление анимацией с помощью CSS-класса

Допустим, не нужно, чтобы анимация воспроизводилась сразу. Воспроизведением анимации можно управлять, добавляя HTML-элементу CSS-класс переключатель только анимации, который не используется для остальной стилизации элемента.

CSS-анимация будет воспроизводиться, когда HTML-элементу будет добавлен CSS-класс .square-animation :

В этом примере CSS-анимация воспроизводится не каждый раз при нажатии на кнопку, а только тогда, когда HTML-элементу будет добавлен CSS-класс .square-animation .

Несмотря на то, что анимация должна показывать появление элемента, элемент отображается и до добавления класса .square-animation . Это сделано для того, чтобы при первой загрузке элемент был виден пользователю, даже если JavaScript заблокирован или не работает.

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

В примере выше была реализована CSS-анимация, которая запускается при добавлении HTML-элементу CSS-класса. Вместо перехвата события нажатия кнопки, для добавления и удаления CSS-класса можно использовать несколько вариантов обнаружения состояния, когда элемент при скролле появляется в видимой части окна.

Вот три способа определить, когда элемент находится в видимой области окна:

Использовать Intersection Observer API
Измерять смещение элемента при скролле страницы
Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

API-интерфейс Intersection Observer позволяет отслеживать момент пересечения одного элемента с другим, и сообщает, когда это происходит. Этот способ идеально подходит для запуска CSS-анимации при скролле страницы. Всё, что нужно знать — когда HTML-элемент пересекается с окном просмотра. Если он пересекается, значит — находится в видимой области окна и в этот момент надо запустить CSS-анимацию.

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

По умолчанию корневым элементом, который будет проверяться на пересечение, является окно браузера, поэтому наблюдателю нужно только сообщить об анимируемом HTML-элементе.

Когда функция обратного вызова (callback) запускается, она возвращает массив записей из целевых (target) элементов, которые были запрошены, а также некоторую дополнительную информацию о них. В функцию всегда будет возвращаться массив, даже если наблюдение ведётся только за одним элементом, как здесь.

В функции обратного вызова можно перебрать массив записей, чтобы указать, что с ними нужно сделать. Каждая запись имеет свойство isIntersecting , которое может быть true или false . Если оно возвращает true , это означает, что элемент находится в видимой области окна (viewport).

Собираем всё вместе. Обратите внимание, что entry — это объект, предоставленный наблюдателем, а entry.target — это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации.

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

Если нужно, чтобы анимация запускалась каждый раз, когда HTML-элемент входит в видимую область окна, необходимо удалять CSS-класс запуска анимации, когда он находится за пределами видимой области окна.

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

Теперь надо наблюдать за HTML-элементом c CSS-классом square-wrapper а класс для анимации применять к элементу с классом square , как и прежде. Когда элемент-оболочка находится за пределами видимой области, нужно удалять CSS-класс у элемента .square , чтобы анимация перезапускалась каждый раз, когда элемент появляется в окне при скролле.

Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:

Теперь — порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

Запуск CSS-transition при скролле

Если для анимации используется только один шаг и не требуется применение @keyframes , например, достаточно изменения прозрачности HTML-элемента от 0 до 1, можно использовать CSS-transition вместо CSS-animation.

Метод по сути тот же. Вместо определения ключевых кадров ( @keyframes ) для CSS-класса анимации указаны свойства для transition .

Заставим HTML-элемент появляться, когда он перемещается в видимую область просмотра. Для этого в момент появления в окне при скролле ему надо добавить CSS-класс square-transition . Так пользователь, у которого заблокирован или не загружается JavaScript, должен всё-равно увидеть HTML-элемент в его окончательном состоянии.

Это особенно важно, поскольку анимация начинается с opacity: 0 . Если бы не было настройки CSS-класса square-transition и JavaScript не работал, пользователь вообще не увидел бы HTML-элемент! Но если эффект перехода заключается в том, чтобы что-то исчезло, наверное, это не понадобится делать.

При первом запуске JavaScript нужно удалить CSS-класс, чтобы затем, его можно было добавить обратно, когда действительно нужно запустить transition . Это должно быть сделано вне метода обработки наблюдения за скроллом, желательно в начале JavaScript. Вот полный код:

В этом примере CSS-transition запускается, когда элемент-оболочка при скролле появляется в окне. Если Javascript не запустился, элемент всё-равно будет виден.

Как видите, эту технику можно расширять разными способами, чтобы создать множество эффектов анимации.

Как привлечь внимание пользователя к важной информации на вашем сайте? Как быть уверенным в том, что при прокрутке страницы сайта пользователь не упустит главного из виду? Ответ прост: сделайте появление блока заметным – добавьте CSS3 эффект.
В этом посте мы разберем применение библиотеки CSS3 эффектов. Будем добавлять к текстовым блокам, к которым пользователь доскролил мышкой, эффекты появления.

1. Скачиваем библиотеку

На этом сайте вы можете посмотреть все имеющиеся CSS3 эффекты в действии и скачать css файл с их свойствами к себе в проект.

добавляем к себе в проект:

2. Разбираем HTML структуру демо-примера

В нашем примере, на сайте будет основное меню, элементы которого будут ссылаться на текстовые блоки текущей страницы.
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока

, внутренняя ссылка на этот блок будет иметь следующий вид:
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:

Каждая ссылка ссылается на соответствующий блок:

И как вы понимаете теперь осталось поговорить о логики скрипта, каким образом добавлять нужные классы эффектов.

3. Разбираем jQuery подход к добавлению эффектов

Начнем с первого блока в котором 9 статей. Ему мы добавим класс zoomIn эффекта сразу после загрузки.

Таким образом мы каждой статье первого блока добавили класс анимации – animated и класс того эффекта, который хотим наложить на блок при загрузки страницы, в нашем случае zoomIn.

Для второго и третьего блоков в которых у нас по две статьи, мы будем давать левой статье эффект выезда слева, а правой эффект выезда справа. Все эффекты будут добавляться в момент когда пользователь докрутит скролом до блока со статями.

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

Вот та часть кода которая отвечает за отслеживание достигли или нет мы верхнего края блока:

После того как мы достигли нашего блока с двумя статьями каждой нужно дать свой класс, делаем это следующим образом:

С помощью .eq(i) мы выбираем элемент выборки, где i – номер элемента в выборке jQuery и нумерация начинается с нуля.

Для того чтобы все элементы возвращались в исходную позицию после эффектного появления, я добавил условие, если пользователь вернулся в начало страницы, то все блоки с текстами (которые уже не видны) спрятать и удалить у них классы с эффектами, вот такой код получился:

Вот весь скрипт который обрабатывает демо-пример:

Напомню, что подходы к реализации скрипта могут быть разными, все зависит от ситуации и мое решение – это всего лишь пример.

Если вам понадобится помощь в реализации эффектов, пишите комментарии к статье – помогу ?

Испокон веков, всякий раз, когда вы прокручивали страницу, полную различного контента, ничего восхитительного не происходило. Контент, который попадал в поле зрения просто появлялся. А тот, который был прокручен — попросту исчезал из виду.

С нововведениями в CSS и DOM API перед каждым пользователем открываются новые горизонты для создания анимации при скролле. Но давайте меньше говорить и больше делать. Предлагаю ознакомиться с таким примером:

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

Все эти виды анимации, которые проявляют себя во время прокрутки страницы пользователем, имеют довольно скучное и незапоминающееся название – анимация, активируемая при скроллинге.

Изучив эту статью, вы сможете узнать практически все о таком виде анимации для веб-страниц и, собственно, как внедрить ее использование в реальную жизнь. Способ, с помощью которого мы будем учиться, базируется на определении текущей проблемы, которую нужно решить.

После уточнения всех деталей мы сможем определиться, каким все же должен быть конечный результат. Далее мы изучим некоторые отрывки кода, прежде чем перейдем к практической части решения заданий. Это делается для того, чтобы понять, как все части кода работают вместе, и как вышеприведенный пример вообще функционирует. Это действительно должно быть интересным, так давайте начнем!

Способ, по которому работает данный вид анимации, довольно прост с одной стороны и сложен с другой. Более легкий этап включает в себя сбор в одно целое нескольких технических моментов. Сложность же заключается в том, как именно все будет взаимодействовать между собой, чтобы у пользователя действительно создалось впечатление, что перед ним – единый и проработанный объект, готовый к взаимодействию.

Контент

Начиная с самого верха веб-страницы, первое, что видит пользователь, это контент:

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

Время скроллить

Контент, расположенный на любой веб-странице, является автономным, но способ просмотра данного контента зависит от вашего браузера (или других параметров).

Всякий раз, когда браузер видит больше контента, чем он может отобразить за один раз, он будет давать вам возможность прокрутить содержимое текущей веб-страницы:

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

Поэтому мы хотим усовершенствовать существующий контент так, чтобы его элементы при скроллинге изменяли свой вид различными способами.

Идентификация элементов

Скорее всего, это самая сложная часть в создании активной анимации. Ранее мы говорили в целом, что будем работать с контентом. Наш контент на самом деле состоит из различных HTML элементов, отображение многих из которых зависит от того, каким образом они расположены на веб-странице и как взаимодействуют друг с другом.

В любом случае, только подмножество таких элементов будет видимым на вашем экране в конкретный момент времени:

Во время скороллинга подмножество видимых элементов будет меняться:

В зависимости от вида эффекта, который вы собираетесь использовать для того или иного элемента, важно будет определиться с текущей областью видимости, поскольку это сыграет ключевую роль в отображении анимации для пользователя.

Другой же заключается в том, что определяет полноту отображения тех или иных элементов на странице:

Изменение элементов

После того, как вы идентифицировали элементы, с которыми собираетесь работать, остается все же что-то сделать с этими элементами. В то время, как главной темой данного урока является научить вас анимировать элементы веб-страницы, практическое же решение данной задачи является более универсальным.

Это решение базируется на создании значений класса видимых (в конкретный момент времени) элементов. Теперь у нас одна задача: активировать любой из стилей CSS, который сможет в дальнейшем управлять прокручиваемыми элементами на данной веб-странице. Это основная концепция моделирования элементов с помощью JavaScript.

Давайте более детально рассмотрим на примере. Для начала, используем некоторые элементы из списка:

Эти элементы имеют следующий стиль:

Если визуализировать вышеуказанное, то мы получим примерно следующее:

Довольно важно отметить, что будет происходить в зависимости от свойств CSS стиля, которые применены к тому или иному элементу на веб-странице. Видимые элементы получают лишь сигнал. Как именно будет реагировать CSS стиль, зависит только от того, какие параметры в коде вы зададите. Создание анимации, которая активируется при прокрутке экрана – лишь один пункт из большого списка ваших возможностей.

Создание структуры

В предыдущих этапах мы познакомились с различными путями создания анимированного контента при скроллинге. Далее мы сможем ознакомиться с информацией, которая поможет понять, как взаимодействует JavaScript с нашими видимыми элементами.

Создание события прокрутки

Прежде всего, с помощью JavaScript мы сможем определить момент прокрутки пользователем веб-страницы. Всякий раз, когда вы прокручиваете страницу используя скроллбар (или пальцы на сенсорном устройстве), ваш браузер запускает событие прокрутки. Вот самый простой способ проверить это:

Каждый раз, когда вы скроллите в окне браузера, вызывается обработчик событий dealWithScrolling . Выглядит довольно просто, не так ли?

Но существует небольшая проблема с данным подходом. Данное событие вызывается при очень большой частоте, поэтому вам нужно не допустить конфликта с DOM (объектной моделью документа). Вы можете использовать setTimeOut или setInterval , чтобы определить задержку реакции браузера на обработку того или иного события, но лучше привязать данные параметры к частоте обновления кадров страницы. Это может быть осуществлено с помощью метода requestAnimationFrame .

Советуем взглянуть на следующий фрагмент:

Конечный результат этого кода идентичен к тому подходу, который мы рассматривали ранее в статье. Как только страница начинает прокручиваться, вызывается обработчик событий dealWithScrolling . Разница лишь в том, что наш обработчик событий не будет вызван раньше, чем метод requestAnimationFrame . Это значит, что текущий обработчик событий будет вызван около 60 раз в секунду, что является допустимым значением при работе с DOM структурами различного рода.

Определение видимых элементов

Только некоторые фрагменты кода позволят вам выяснить, какие из элементов на текущей веб-странице можно считать видимыми при скроллинге. Чтобы это осуществить, используем метод getBoundingClientRect . Этот метод возвращает некий прямоугольник, который ограничивает ту самую видимую область, со значениями относительно верха, низа страницы, левого и правого направлений, а также относительно левого верхнего угла браузера и его основных свойств (ширины и высоты окна). Другими вашими помощниками будут выступать свойства window.innerHeight window.innerWidth , которые возвращают высоту и ширину окна браузера соответственно.

Для визуализации полученных сведений рекомендуем ознакомиться с данной диаграммой:

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

Определение частично видимых элементов

Чтобы определить, какая часть элементов на странице является видимой, вы можете использовать функцию isPartiallyVisible :

В качестве аргумента функции нам необходимо передать элемент. Если элемент частично видимый, функция вернет true . Иначе, функция вернет false .

Определение полностью видимых элементов

Чтобы определить, является ли элемент полностью видимым, вы можете использовать функцию isFullyVisible :

Данная функция работает аналогично к isPartiallyVisible функции, которая была описана ранее. Если элемент определился, как полностью видимый, то функция isFullyVisible вернет значение true , если же данный элемент оказался частично видимым для пользователя, то наша функция вернет значение false .

Собираем все воедино

Если вы дошли до этой части статьи, то наверняка поняли, как разнообразить контент на сайте, чтобы при скроллинге страницы он был динамичным. Также вы ознакомились со сложными фрагментами кода, которые должны взаимодействовать между собой корректно, чтобы осуществить вашу задумку. Кроме того, вы узнали, что дают функции isFullyVisible и isPartiallyVisible . Чтобы увидеть, как эти все фрагменты кода работают вместе, вы можете посмотреть исходный пример здесь.

Если вы хотите изучить полный код (HTML, JS, CSS) для нашего примера, рекомендуем вам ознакомиться со следующими материалами:

Но не стоит пугаться столь большого количества кода, которого на самом деле меньше, чем кажется сразу. Здесь также много интересных элементов, которые описаны в body, нашем списке и др. Не забудьте проследить, чтобы в JavaScript были учтены все особенности для корректной работы веб-страницы и ее контента. Также не забудьте добавить функции isFullyVisible и isPartiallyVisible, чтобы определить, к какой категории относятся те или иные элементы. Этот пример содержит все, о чем мы говорили ранее, и даже больше!

Вывод

Теперь, когда вы дошли до конца, думаю, что у вас поменялось мнение о создании контента, который становится активным при скроллинге веб-страницы благодаря специальному обработчику событий при прокручивании. Теперь вы знаете, что браузер реагирует на прокрутку путем проверки текущих элементов на видимость – и тогда дает свой ответ. Также не стоит забывать о грамотном составлении классов стилей CSS, которые и будут оживлять нашу страницу. Кроме этого, вы должны помнить о том, что процесс оживления веб-содержимого – это комплексный процесс, требующий большого внимания и навыков, которые, я надеюсь, вы сумели приобрести, изучая данный материал.

Теперь остается лишь пожелать вам удачи в ваших начинаниях, и я уверен на 100%, что у вас получится.

Уже давно вошло в моду применять на 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 к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Читайте также: