스크롤 기반 애니메이션 우수사례

Swetha Gopalakrishnan

Saurabh Rajpal

스크롤 기반 애니메이션 웹상의 일반적인 UX 패턴입니다. 스크롤 기반 애니메이션이 스크롤 컨테이너의 스크롤 위치에 연결됩니다. 다시 말해 위나 아래로 스크롤하면 연결된 애니메이션이 앞뒤로 스크러빙되어 자동으로 반응할 수 있습니다. 시차 배경과 같은 효과의 예 스크롤할 때 움직이는 이미지나 읽기 표시기를 볼 수 있습니다.

개발자는 일반적으로 JavaScript를 사용하여 스크롤 기반 애니메이션을 만들었습니다. 기본 스레드의 스크롤 이벤트에 응답합니다. 이렇게 하면 스크롤 기반 애니메이션의 성능이 스크롤 이벤트가 비동기식으로 전달되며 종종 버벅거림이 기본 스레드에 있습니다.

하지만 이번 브라우저에 포함된 CSS 및 UI 기능 이제 할 수 있습니다 선언적 스크롤 기반 애니메이션을 만들 수 있습니다. 스크롤 타임라인 및 뷰 포함 타임라인, 기존 콘텐츠와 통합되는 새로운 개념 Web Animations API (WAAPI) 및 CSS Animations API 이제 부드럽고 매끄럽게 스크롤 기반 애니메이션이 기본 스레드에서 실행되며, 단 몇 줄의 있습니다. 이 우수사례에서 Tokopedia, redBus, Policybazaar를 발견해 보세요. 이미 이 새로운 기능을 활용하고 있습니다.

Tokopedia

Tokopedia는 이전 커스텀 JavaScript 구현을 스크롤 기반 애니메이션을 통해 페이지 성능을 최적화하고 전반적인 탐색 환경을 파악할 수 있습니다.

기존보다 최대 80% 적은 수의 코드를 스크롤 이벤트를 관찰한 결과 평균 CPU 사용량이 10% 증가하지 스크롤하는 동안 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의 모바일 및 데스크톱 애니메이션은 할 일 방문 페이지: 모든 사용자에게 도달할 수 있습니다 스크롤 기반 애니메이션을 사용하면 이러한 맞춤형 자바스크립트 구현을 CSS로 교체하여 동일한 효과를 얻을 수 있습니다.

사용 사례

이미지 표시가 있는 포토 갤러리( 및 표지 흐름( (데스크톱)

코드 (모바일)

이전 예에서 Tokopedia는 익명 스크롤 진행률을 사용하여 타임라인에 따라 만들 수 있습니다. 다음 코드에서 redBus는 이름이 지정된 뷰 진행률을 사용합니다. 타임라인에 따라 만들 수 있습니다. 애니메이션은 <img>의 opacity 및 clip-path를 변경합니다. 요소에서 가장 가까운 내부의 정의된 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%;
   }
`;

이 기능은 성능의 완벽한 조합이기 때문에 매우 만족스럽습니다. 검색엔진 최적화를 위한 페이지 경험 신호를 높입니다. 상단에 최소한의 학습 곡선으로 모든 전자상거래의 필수 있습니다. 또한 긍정적인 의견과 다른 팀으로부터도 더 많은 사용자 여정을 위한 SDA: 아밋 쿠마르, 선임 엔지니어링 RedBus의 관리자.

정책바자

보험 상품을 비교하는 것은 사용자가 올바른 결정을 내리기 위해 취하는 반복적인 주요 액션입니다. 중요한 부분입니다. Policybazaar는 스크롤 기반 애니메이션을 사용하여 사용자가 표를 스크롤할 때 이에 대한 응답으로 우선순위가 낮은 요소의 크기 이 원활한 스크롤 환경을 제공하면서 가독성을 개선했습니다.

스크롤 중심 애니메이션을 사용하여 사용자가 요금제를 비교하여 깔끔하면서도 집중한 자료를 읽을 수 있습니다. 담당하고 있습니다.—리샤브 메로트라, Design for Life Insurance BU, 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 애니메이션의 진행률을 제어할 수 있습니다. 추가합니다.

@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 (제품 등록정보 페이지)

Tokopedia (제품 세부정보 페이지)

스크롤 기반 Animations API 사용 시 고려해야 할 사항

지원되지 않는 브라우저에 대해 스크롤 기반 애니메이션을 폴리필할 수 있습니다. 예를 들어 스크롤 타임라인 폴리필. 그렇게 하면 다른 광고와 함께 잘 작동하는지 확인하려면 폴리필을 사용하는 브라우저에서 애니메이션이 실행되지 않는 문제 버벅거림이 발생하지 않습니다

CSS에서 @supports를 사용하여 애니메이션 타임라인 지원을 테스트할 수 있습니다. 스크롤 기반 애니메이션을 사용하기 전에 사용하는 것이 좋습니다 예를 들면 다음과 같습니다.

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

}

리소스

• 스크롤 기반 애니메이션 데모
• 스크롤 기반 애니메이션으로 스크롤 시 요소에 애니메이션 적용
• Codelab: CSS에서 스크롤 기반 애니메이션 시작하기
• Chrome 확장 프로그램: 스크롤 기반 애니메이션 디버거
• 스크롤 타임라인 폴리필
• 버그를 신고하고 싶으신가요, 아니면 새로운 기능을 신고하고 싶으신가요? 의견을 들려주세요.

이 시리즈의 다른 도움말을 통해 전자상거래 회사가 뷰 전환, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 어떤 이점을 얻었는지 알아보세요.

• 웹 UI 기능이 전자상거래 사이트에 중요한 이유는 무엇인가요?
• 전환 우수사례 보기
• 팝오버 API 우수사례
• 컨테이너 쿼리 우수사례
• :has() 선택자 우수사례