Эффект появления при скролле что это

Создание эффектов при прокрутке

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

Эффекты открывания можно использовать для создания интересных взаимодействий с пользовательскими компонентами, такими как слайд-шоу. Этот слайд создан с помощью схожей wipe-анимации:

Рассмотрим создание этого эффекта с использованием CSS и Animate on Scroll (AOS) (библиотека JavaScript для анимации элементов при прокрутке в момент входа пользователя в viewport).

Начало

Начнем с добавления библиотеки Animate on Scroll в проект. Добавьте aos.css в тег <head> :

И aos.js перед закрытием тега <body> :

Затем инициализируйте AOS:

Создание открывающегося блока

Для начала создадим открывающийся блок, из которого будет появляться текст. Возьмем текст из Doggo Ipsum, генератора lorem ipsum из doggo lingo.

Класс . reveal-holder представляет собой контейнер для элемента сплошного цветного блока и текста. Дизайн классов выглядит следующим образом:

Благодаря этому, блок открывает и закрывает элемент должным образом. Высота класса .reveal-block должна достигать 101%:

Установка свойства CSS overflow в скрытое значение для класса .reveal-holder помогает предотвратить отсечения вне содержимого элемента.

Использование CSS переходов

Анимации установлены с помощью атрибута data-aos . Например, чтобы открыть элемент справа, добавьте атрибут в класс .reveal-block в HTML:

Свойство CSS transform использует функцию scaleX() в элементе .reveal-block для изменения размеров блока при анимации. Свойство transform-origin устанавливает точку изменения, которая в данном случае находится на 100% 0% или вправо-влево. Благодаря этому, блок начинает двигаться, уменьшаясь в размерах. transition-property устанавливает эффект перехода для применения, а transition-delay устанавливает переход на ожидание, основанное на установленном значении.

Добавьте эти параметры в функцию AOS.init() для воспроизведения анимации один раз:

Теперь анимации прокрутятся один раз! Это выглядит следующим образом:

Аналогичным образом можно добавить этот эффект для изображений. Замените текст с изображением в HTML:

Чтобы слайд открывался слева направо отредактируйте transform-origin на 0% 100%:

Анимация псевдоэлементов

Мы будем использовать псевдоэлементы в классе .reveal-block для создания более стильной анимации.

Начнем с изменений CSS для класса .reveal-block :

Псевдоэлемент ::before является элементом сам по себе и выступает в качестве другого .reveal-block . Однако в нем могут быть установлены свойства, такие как фоновый цвет или место размещения.

Добавьте класс .right в .reveal-block :

Это поможет при анимации с псевдоэлементами. CSS выглядит так:

Выглядит отлично! Осталось только скрыть появление элементов перед прокруткой. Для этого добавим атрибут data-aos в класс .reveal-holder :

И соответствующий CSS:

Подведение итогов

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

Эффекты появления при скролле в Тильде

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

Такую анимацию появления можно сделать как в стандартных блоках, так и для Zero Block. Рассмотрим все способы отдельно.

Эффект появления элементов при скролле для стандартных блоков

В настройках почти каждого блока в Тильде есть раздел «Анимация»:

В нем можно настроить анимацию появления каждого элемента этого блока: Заголовок, Описание, Кнопка, Текст, Изображение.

Тильда предлагает нам такие варианты появления элементов при скролле:

прозрачность;
прозрачность (снизу);
прозрачность (сверху);
прозрачность (слева);
прозрачность (справа);
прозрачность (увеличение);

Эффект появления элементов при скролле для Zero Block

В Zero Block вы можете воспользоваться стандартной анимацией появления для каждого элемента или создать уникальный собственный.

Как запускать 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 не запустился, элемент всё-равно будет виден.

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

Анимации при прокрутке и при наведении

В редакторе Creatium доступно более 60 видов анимации. Все они делятся на два типа:

Анимация при прокрутке;

Анимация при наведении.

Содержание

Анимация при прокрутке

Особенности данного типа анимации:

Можно включить для секций и виджетов;

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

Чтобы включить анимацию для секции — нужно открыть Настройки секции и перейти в Эффекты

В момент выбора анимации она автоматически воспроизведется в редакторе;

Повторить анимацию можно нажатием на кнопку ”Воспроизвести”;

Параметр ”Задержка выполнения анимации” позволяет задать промежуток времени между отсутствием анимации и началом её воспроизведения.

Чтобы включить анимацию для виджета — нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел "Эффекты".

Добавим эффект анимации при прокрутке для виджетов в секции с описанием товара.

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

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

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

Анимация при наведении

Отличия этого типа анимаций от предыдущего:- Не воспроизводится автоматически в момент прокрутки страницы;- Воспроизводится каждый раз, когда над виджетом проходит курсор мыши.

Чтобы включить анимацию для виджета "Кнопка" — нужно открыть настройки кнопки в гаечном ключе и перейти в раздел ”Вид” — "Эффекты".

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

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

Отключение анимации на странице

Отключение анимации происходит точно так же, как и включение.

Анимация секций:

Эффект появления при прокрутке — разрешает анимации секций выполняться при прокрутке;

Слайдер секции — включает особый тип перехода между секциями.

Отключить — запрещает анимации секций выполняться при прокрутке.

Анимация виджетов:

Эффект появления при прокрутке — разрешает воспроизведение анимации виджетов при прокрутке;

Отключить — запрещается воспроизведение анимации виджетов при прокрутке.