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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

Токопедия

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 имеет разные анимации для мобильных и настольных компьютеров на своей целевой странице дел , которая показывается всем пользователям на ранних этапах воронки конверсии. С помощью анимации, управляемой прокруткой, они смогли заменить эти пользовательские реализации JavaScript на CSS, чтобы добиться того же эффекта.

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

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

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

В предыдущем примере Токопедия использовала анонимную шкалу прогресса прокрутки . В следующем коде 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%;
   }
`;

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

Политический базар

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

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

Код

Как и в предыдущем примере из Токопедии, 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 (Главная страница)

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

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

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

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

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

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

}

Ресурсы

• Демонстрации анимации, управляемой прокруткой
• Анимация элементов при прокрутке с помощью анимации, управляемой прокруткой
• Codelab: Начало работы с анимацией, управляемой прокруткой, в CSS
• Расширение Chrome: отладчик анимации, управляемой прокруткой.
• Прокрутка временной шкалы Polyfill
• Хотите сообщить об ошибке или новой функции? Мы хотим услышать ваше мнение !

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

• Почему возможности веб-интерфейса важны для вашего сайта электронной коммерции?
• Посмотреть примеры использования переходов
• Примеры использования Popover API
• Примеры использования контейнерных запросов
• Примеры применения селектора :has()