Как запускать CSS-анимацию при прокрутке страницы
В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения – видимой части окна, с помощью Intersection Observer API.
Настройка CSS-анимации с помощью ключевых кадров
Начнем с создания CSS-анимации, которая определяется ключевыми кадрами @keyframes .
Анимацию можно назвать как угодно, пусть будет wipe-enter . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.
После того, как определены ключевые кадры, можно использовать анимацию для элемента, установив свойству animation-name название ключевых кадров: wipe-enter . Кроме этого необходимо установить animation-duration – продолжительность анимации и animation-iteration-count – счетчик итераций, указывающий, сколько раз анимация должна воспроизводиться, например – бесконечно.
CSS-класс .square пусть будет заключён в медиа-запрос prefers-reduce-motion: no-preference . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.
В этом примере будет анимирован 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 не запустился, элемент всё-равно будет виден.
Как видите, эту технику можно расширять разными способами, чтобы создать множество эффектов анимации.
Появление элемента на странице при прокрутке
Продолжая тему интерактивных элементов на странице сайта, хотелось бы коснуться такой вещи, как появление элемента при прокрутке (скроллинге). Не важно, что это будет за элемент, форма для подписки, рекламный баннер или кнопка вверх, в любом случае механизм появления/сокрытия будет одним и тем же. Так как же сделать появление элемента при прокрутке страницы вниз?
Для решения этой задачи мы снова воспользуемся JS библиотекой Jquery. За прокрутку (скроллинг) в Jquery отвечает событие scroll(), а так же методы .scrollTop() .scrollLeft(), благодаря которым мы можем получить или изменить вертикальную или горизонтальную прокрутку элементов. В нашем случае нам понадобится метод .scrollTop(), которым мы воспользуемся для получения значения текущей позиции прокрутки и выполнения определенных действий при достижении определенного уровня.
Для воплощения задуманного воспользуемся следующим кодом:
, т.е. мы отслеживаем окно браузера на событие прокрутки (скроллинга) ползунка, и после того, как ползунок преодолеет значение в 120 единиц по высоте, покажем элемент #top, воспользовавшись функцией fadeIn(), во всех остальных случаях данный элемент скрыт функцией fadeOut(). Теперь нам осталось задать для элемента стили, чтобы элемент был сразу невидимым на странице.
Вот так просто можно показывать/скрывать элемент при прокрутке окна браузера. Единственное, на что рекомендовал бы обратить внимание, это скорость появления/сокрытия элемента (значения указанные в функциях fadeIn() и fadeOut()). В моем понимании они уникальны для каждого дизайна и зависят от размера и цвета появляющегося элемента, поэтому прежде чем оставить подобранные мною значения рекомендовал бы с ними какое-то время поиграться, чтобы анимация на вашем сайте смотрелась более гармонично.
Что такое эффект при скролле в тильде
Делать сайты не статичными — задача, практически, каждого дизайнера или вебмастера. Современный посетитель сайта становится все требовательнее. Поэтому и Тильда шагает в ногу со временем и предлагает различные виды анимации. В том числе, и анимацию появления объектов странице при скролле.
Такую анимацию появления можно сделать как в стандартных блоках, так и для Zero Block. Рассмотрим все способы отдельно.
Эффект появления элементов при скролле для стандартных блоков
В настройках почти каждого блока в Тильде есть раздел «Анимация»:
В нем можно настроить анимацию появления каждого элемента этого блока: Заголовок, Описание, Кнопка, Текст, Изображение.
Тильда предлагает нам такие варианты появления элементов при скролле:
- прозрачность;
- прозрачность (снизу);
- прозрачность (сверху);
- прозрачность (слева);
- прозрачность (справа);
- прозрачность (увеличение);
Эффект появления элементов при скролле для Zero Block
В Zero Block вы можете воспользоваться стандартной анимацией появления для каждого элемента или создать уникальный собственный.
Что такое эффект при скролле в тильде
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Что такое эффект при скролле в тильде
Katherine Matilda Swinton is a British actress, model, and artist. She is known for her roles in both arthouse films and large-scale Hollywood productions.
She won the Academy Award for Best Supporting Actress and the BAFTA Award for Best Actress in a Supporting Role for her performance as Karen Crowder in the 2007 film Michael Clayton.
Katherine Matilda Swinton was born on 5 November 1960 in London, the daughter of Judith Balfour (née Killen; 1929–2012) and Sir John Swinton. She has three brothers. Her father is a retired major general in the British Army, and was Lord Lieutenant of Berwickshire from 1989 to 2000. Her mother was Australian.
Swinton began her career in experimental films directed by Derek Jarman, starting with Caravaggio (1986), followed by The Last of England (1988), War Requiem (1989), and The Garden (1990). Swinton won the Volpi Cup for Best Actress at the Venice Film Festival for her portrayal of Isabella of France in Edward II (1991). She next starred in Sally Potter’s Orlando (1992), and was nominated for the European Film Award for Best Actress.
Анимация при прокрутке страницы с библиотекой AOS js
Фронтенд разработчики часто сталкиваются с тем, что клиенты просят реализовать на сайте какие-то потрясающие эффекты — анимацию при прокрутке страницы. Да, конечно, можно такие эффекты создать на CSS самостоятельно, потратив несколько часов на попытки сделать достойную анимацию. Но для этих целей уже создано множество готовых библиотек. И одна из лучших — это Animate On Scroll или AOS js
Быстрая навигация
В этой статье вы узнаете о том, как установить эту библиотеку и заставить ее работать. К концу урока создание анимации при скролле станет для вас плёвым делом.
1 Установка AOS.js
На выбор есть несколько вариантов установки. Можно скачать, использовать CDN или установить библиотеку через YARN, NPM либо BOWER
Подключаем с помощью CDN
CDN (Content Delivery Networks) подразумевает, что что вам не нужно скачивать библиотеку, она хранится на удаленных серверах. Все что нужно сделать — это подключить ее CSS и JS файлы к себе на станицу.
Установка с помощью YARN, NPM, BOWER
Вот и все, больше ничего делать не нужно. Производительность нашего сайта особо не пострадала.
Чтобы инициализировать AOS достаточно написать в HTML или лучше в отдельном JavaScript файле следующую строчку:
2 Анимация элементов при скролле с AOS
После инициализации библиотеки нам нужно добавить к элементам, которые мы собираемся анимировать при прокрутке, некоторые атрибуты.
Для базовой анимации впишите в ваш HTML элемент атрибут data-aos=»название_анимации»
Разработчики Animate On Scroll создали много типов анимации, которые вы можете выбрать для своего блока. К примеру, при появлении/исчезновении элемента можно добавить анимации: «fade», «fade-up» или «fade-down-left». Или же добавить анимацию флипа и слайда «flip-up», «flip-left», «slide-down» и «slide-right».
Посмотрите пример разметки:
Уже выходит неплохо, а ведь кроме строки инициализации нам не пришлось написать ни строчки js кода. Рассмотрим все базовые возможности AOS.js:
Fade эффекты
Также существую варианты:
- data-aos=»fade-up-right»
- data-aos=»fade-up-left»
- data-aos=»fade-down-right»
- data-aos=»fade-down-left»
Flip эффекты
Вы можете обновлять страницу кнопкой f5 , чтобы лучше рассмотреть анимацию.
Zoom эффекты
Еще zoom анимации:
- data-aos=»zoom-in-up»
- data-aos=»zoom-in-down»
- data-aos=»zoom-in-left»
- data-aos=»zoom-in-right»
- data-aos=»zoom-out-up»
- data-aos=»zoom-out-down»
- data-aos=»zoom-out-right»
- data-aos=»zoom-out-left»
3 Кастомизация анимации при прокрутке страницы
Если вам не достаточно стандартных возможностей, можно кастомизировать анимацию добавив еще дата-атрибутов к вашему HTML элементу. Рассмотрим их подробнее.
- data-aos-offset — этот атрибут используется для того, чтобы начать анимацию при прокрутки страницы раньше или позже. Значение по умолчанию 120px.
- data-aos-duration — как видно из названия, атрибут отвечает за продолжительность анимации. Его значение может быть от 50 до 3000 с шагом в 50 мс. По умолчанию имеет значение 400.
- data-aos-easing — атрибут аналогичный animation-timing-function в CSS. Может принимать значения linear, ease-in-out, ease-out-quart и другие. Полный список вы можете найти в документации.
- data-aos-once — важная настройка, позволяет контролировать должна ли анимация воспроизводиться только при первом обращении к определенному элементу или при каждой прокрутке вверх/вниз. По дефолту анимация воспроизводится всякий раз при скролле, чтобы отменить это, укажите значение true.
- data-aos-anchor — запускает анимацию в зависимости от положения какого-нибудь другого элемента. В качестве значения принимает любой селектор. Значение по умолчанию null, то есть анимация будет запускаться относительно собственной позиции элемента.
- data-aos-anchor-placement — по дефолту анимация начинается как только верхняя часть элемента достигает нижней части экрана. Такое поведение можно изменить с помощью этого атрибута. Возможные значения top-bottom, top-center или top-top. Такие же комбинации можно сделать и с center или bottom.
Вот несколько примеров подобной кастомизации:
4 Больше возможностей
Если хотите от AOS еще больше гибкости и возможностей, это библиотека может вам их предоставить. Вместо того чтобы писать атрибуты для каждого элемента в отдельности, можно добавить их в init()
Также можно отключить анимацию на определенных устройствах:
В этой статье вы познакомились с библиотекой Animate on Scroll. Как видите AOS является отличным выбором для того, чтобы добавить анимацию при скролле на ваш сайт, ведь она очень просто устанавливается и прекрасно кастомизируется.