Плавное появление элементов

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

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

Шаг 1: Подготовка HTML-структуры

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

        
Блок 1
 
Блок 2
 
Блок 3
 
   

Шаг 2: Стилизация элементов

Теперь добавим немного стилей для наших блоков и зададим начальное состояние элементов (невидимые и смещенные).

Шаг 3: Реализация плавного появления с помощью JavaScript

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

document.addEventListener('DOMContentLoaded', function() < let blocks = document.querySelectorAll('.block'); function checkBlocksVisibility() < let windowHeight = window.innerHeight; blocks.forEach(block => < let blockPosition = block.getBoundingClientRect().top; if (blockPosition < windowHeight - 100) < block.style.opacity = "1"; block.style.transform = "translateY(0)"; >>); > checkBlocksVisibility(); window.addEventListener('scroll', function() < checkBlocksVisibility(); >); >);

Теперь, когда вы прокрутите страницу, элементы будут плавно появляться и двигаться в свою исходную позицию. 🎉

Заключение

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

Если вы хотите углубить свои знания в области веб-разработки, рекомендую посетить замечательную школу

Источник

Появление элемента на странице при прокрутке

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

Для решения этой задачи мы снова воспользуемся JS библиотекой Jquery. За прокрутку (скроллинг) в Jquery отвечает событие scroll(), а так же методы .scrollTop() .scrollLeft(), благодаря которым мы можем получить или изменить вертикальную или горизонтальную прокрутку элементов. В нашем случае нам понадобится метод .scrollTop(), которым мы воспользуемся для получения значения текущей позиции прокрутки и выполнения определенных действий при достижении определенного уровня.

Для воплощения задуманного воспользуемся следующим кодом:

$(document).ready(function()< $(window).scroll(function()< if($(window).scrollTop()>120)< $('#top').fadeIn(900) >else < $('#top').fadeOut(700) >>); >);

, т.е. мы отслеживаем окно браузера на событие прокрутки (скроллинга) ползунка, и после того, как ползунок преодолеет значение в 120 единиц по высоте, покажем элемент #top, воспользовавшись функцией fadeIn(), во всех остальных случаях данный элемент скрыт функцией fadeOut(). Теперь нам осталось задать для элемента стили, чтобы элемент был сразу невидимым на странице.

Вот так просто можно показывать/скрывать элемент при прокрутке окна браузера. Единственное, на что рекомендовал бы обратить внимание, это скорость появления/сокрытия элемента (значения указанные в функциях fadeIn() и fadeOut()). В моем понимании они уникальны для каждого дизайна и зависят от размера и цвета появляющегося элемента, поэтому прежде чем оставить подобранные мною значения рекомендовал бы с ними какое-то время поиграться, чтобы анимация на вашем сайте смотрелась более гармонично.

Источник

Как запускать CSS-анимацию при прокрутке страницы

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

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

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

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

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

@media (prefers-reduced-motion: no-preference) < .square < animation-name: wipe-enter; animation-duration: 1s; animation-iteration-count: infinite; >>

CSS-класс .square пусть будет заключён в медиа-запрос prefers-reduce-motion: no-preference . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.

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

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

@media (prefers-reduced-motion: no-preference) < .square < animation: wipe-enter 1s infinite; >>

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

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

.square < width: 200px; height: 200px; background: #e62a52; // и т.д. >@media (prefers-reduced-motion: no-preference) < .square-animation < animation: wipe-enter 1s 1; >>

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

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

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

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

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

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

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

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

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

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

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

// Создать наблюдателя const observer = new IntersectionObserver(entries => < // Заполним метод обратного вызова позже. >); // Сообщить наблюдателю, какие элементы следует отслеживать observer.observe(document.querySelector('.square'));

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

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

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

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

const observer = new IntersectionObserver(entries => < // перебор записей entries.forEach(entry => < // если элемент появился if (entry.isIntersecting) < // добавить ему CSS-класс entry.target.classList.add('square-animation'); >>); >); observer.observe(document.querySelector('.square'));

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

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

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

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

const observer = new IntersectionObserver(entries => < entries.forEach(entry => < const square = entry.target.querySelector('.square'); if (entry.isIntersecting) < square.classList.add('square-animation'); return; // если класс добавлен, продолжать уже не надо >// перемещение завершено, теперь надо удалить класс square.classList.remove('square-animation'); >); >); observer.observe(document.querySelector('.square-wrapper'));

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

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

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

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

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

.square < width: 200px; height: 200px; background: #e62a52; border-radius: 8px; opacity: 0; transform: scale(1.2); >@media (prefers-reduced-motion: no-preference) < .square < transition: opacity 1.5s ease, transform 1.5s ease; >> .square-transition

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

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

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

// Удалить CSS-класс square-transition const square = document.querySelector('.square'); square.classList.remove('square-transition'); // Добавить наблюдение за появлением элемента const observer = new IntersectionObserver(entries => < entries.forEach(entry => < if (entry.isIntersecting) < square.classList.add('square-transition'); return; >square.classList.remove('square-transition'); >); >); observer.observe(document.querySelector('.square-wrapper'));

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

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

Источник