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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

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

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

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

В предыдущем примере 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%;
   }
`;

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

Полибазар

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

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

Код

Аналогично предыдущему примеру от 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 (Главная страница)

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

Токопедия (страница с подробным описанием товара)

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

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

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

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

}

Ресурсы

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

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

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