Эта страница переведена с помощью Cloud Translation API.

Примеры анимаций, управляемых прокруткой

Swetha Gopalakrishnan

Saurabh Rajpal

Анимация, управляемая прокруткой, — распространённый UX-шаблон в вебе. Анимация, управляемая прокруткой, привязана к положению прокрутки контейнера прокрутки. Это означает, что при прокрутке вверх или вниз связанная анимация перемещается вперёд или назад в ответ на прокрутку. Примерами таких эффектов являются фоновые изображения с эффектом параллакса или индикаторы чтения, которые перемещаются при прокрутке.

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

Однако благодаря новым функциям CSS и пользовательского интерфейса, реализованным в браузерах , теперь можно создавать декларативные анимации, управляемые прокруткой. Благодаря Scroll Timelines и View Timelines, новым концепциям, интегрируемым с существующим API веб-анимации (WAAPI) и API анимации CSS , теперь можно создавать плавные анимации, управляемые прокруткой, вне основного потока, всего несколькими строками кода. В этом примере вы узнаете, как Tokopedia, redBus и Policybazaar уже используют эту новую функцию.

Browser Support

Source

Токопедия

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

Нам удалось сократить количество строк кода на 80% по сравнению с использованием традиционных событий прокрутки JavaScript, и мы заметили, что средняя загрузка процессора при прокрутке снизилась с 50% до 2% — Энди Вихалим , старший инженер-программист, Tokopedia

Анимированное изменение видимости верхней липкой панели в зависимости от положения прокрутки пользователем.

Код

В следующей реализации функция scroll() используется для установки анонимной временной шкалы прокрутки для управления ходом CSS-анимации. Видимость верхней липкой полосы изменяется в зависимости от положения прокрутки в пределах заданного диапазона animationRange .

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

На целевой странице redBus «Занятия» используются разные анимации для мобильных устройств и компьютеров, которые показываются всем пользователям на ранних этапах воронки конверсии. Благодаря анимации, управляемой прокруткой, им удалось заменить эти пользовательские реализации JavaScript на CSS и добиться того же эффекта.

Варианты использования

Фотогалерея с функциями Image Reveal (для мобильных устройств) и Cover Flow (для настольных компьютеров).

Эффект показа изображений с анимацией, управляемой прокруткой, для загрузки изображений в фотогалерею redBus «Занятия».

Код (мобильный)

В предыдущем примере Tokopedia использовала анонимную временную шкалу прогресса прокрутки . В следующем коде redBus использует именованную временную шкалу прогресса представления . Анимация изменяет opacity и clip-path элемента <img> в пределах заданного animation-range внутри ближайшего родительского скроллера элемента, которым в данном случае является скроллер фотогалереи.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

Мы очень рады этой функции, поскольку она идеально сочетает в себе производительность и удобство использования, повышая показатели UX страниц для SEO. Кроме того, её простота в освоении делает её незаменимой для любого сайта электронной коммерции. Мы также получили положительные отзывы и поддержку от других команд, чтобы использовать SDA для расширения пользовательского опыта. — Амит Кумар , старший технический менеджер, redBus .

Policybazaar

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

Благодаря анимации с прокруткой нам удалось максимально увеличить область просмотра, чтобы пользователь мог сравнивать планы, обеспечивая целенаправленное и упорядоченное чтение . — Ришаб Мехротра , руководитель отдела дизайна подразделения страхования жизни, PolicyBazaar .

Анимация с прокруткой, animate-timeline в таблице сравнения планов в сфере инвестиций и жизни (направление бизнеса).

Код

Подобно предыдущему примеру из Tokopedia, Policybazaar использует функцию scroll() для установки анонимной временной шкалы прокрутки для управления ходом CSS-анимации. В данном случае размер шрифта уменьшается, а заголовок постепенно исчезает в зависимости от положения прокрутки в пределах заданного animation-range .

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

Анимация с прокруткой как распространенная тенденция на протяжении всего пути пользователя

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

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (Домашняя страница)

Эффект прокрутки с анимацией для загрузки карточек товаров на целевой странице redBus «Задачи».

Policybazaar (страница со списком товаров)

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

Tokopedia (страница сведений о продукте)

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

Что следует учитывать при использовании API анимации с помощью прокрутки

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

В CSS вы можете использовать @supports для проверки поддержки animation-timeline перед использованием анимации с прокруткой. Например:

@supports (animation-timeline: scroll()) {

}

Ресурсы

Ознакомьтесь с другими статьями этой серии, в которых рассказывается о том, как компании электронной коммерции выиграли от использования новых функций CSS и пользовательского интерфейса, таких как View Transitions, Popover, Container Queries и селектор has() .