Nghiên cứu điển hình về ảnh động điều hướng cuộn

Swetha Gopalakrishnan

Saurabh Rajpal

Ảnh động dựa trên thao tác cuộn là một mẫu trải nghiệm người dùng phổ biến trên web. Ảnh động dựa trên thao tác cuộn được liên kết với vị trí cuộn của một vùng chứa có thể cuộn. Điều này có nghĩa là khi bạn cuộn lên hoặc xuống, ảnh động được liên kết sẽ tua đi hoặc tua lại để phản hồi trực tiếp. Ví dụ về hiệu ứng này là các hiệu ứng như hình ảnh nền thị sai hoặc chỉ báo đọc di chuyển khi bạn cuộn.

Thông thường, các nhà phát triển đã tạo ảnh động dựa trên thao tác cuộn bằng cách sử dụng JavaScript để phản hồi các sự kiện cuộn trên luồng chính. Điều này gây khó khăn cho việc tạo các ảnh động dựa trên thao tác cuộn có hiệu suất cao và đồng bộ với thao tác cuộn, do các sự kiện cuộn được phân phối không đồng bộ và thường dẫn đến hiện tượng giật do nằm trên luồng chính.

Tuy nhiên, trong số các tính năng CSS và giao diện người dùng mới xuất hiện trong trình duyệt, giờ đây, bạn có thể tạo ảnh động dựa trên thao tác cuộn theo cách khai báo. Với Dòng thời gian cuộn và Dòng thời gian xem, những khái niệm mới tích hợp với Web Animations API (WAAPI) và CSS Animations API hiện có, bạn có thể chạy các hoạt ảnh mượt mà dựa trên thao tác cuộn ngoài luồng chính chỉ bằng một vài dòng mã. Trong nghiên cứu điển hình này, hãy khám phá cách Tokopedia, redBus và Policybazaar đang hưởng lợi từ tính năng mới này.

Tokopedia

Tokopedia đã thay thế các cách triển khai JavaScript tuỳ chỉnh trước đây bằng hiệu ứng động dựa trên thao tác cuộn để tối ưu hoá hiệu suất trang và nâng cao trải nghiệm duyệt web tổng thể trong phễu chuyển đổi thương mại điện tử của họ.

Chúng tôi đã giảm được đến 80% số dòng mã so với khi sử dụng các sự kiện cuộn JavaScript thông thường và nhận thấy mức sử dụng CPU trung bình giảm từ 50% xuống 2% trong khi cuộn – Andy Wihalim, Kỹ sư phần mềm cấp cao, Tokopedia

Mã

Cách triển khai sau đây sử dụng hàm scroll() để đặt dòng thời gian tiến trình cuộn ẩn danh nhằm kiểm soát tiến trình của ảnh động CSS. Khả năng hiển thị của thanh cố định trên cùng sẽ thay đổi dựa trên vị trí cuộn trong animationRange đã xác định.

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 có các ảnh động khác nhau cho thiết bị di động và máy tính trên trang đích việc cần làm. Trang này xuất hiện sớm trong phễu chuyển đổi cho tất cả người dùng. Với ảnh động dựa trên thao tác cuộn, họ có thể thay thế các cách triển khai JavaScript tuỳ chỉnh này bằng CSS để đạt được hiệu ứng tương tự.

Trường hợp sử dụng

Thư viện ảnh có hiệu ứng Lộ ảnh (dành cho thiết bị di động) và Băng chuyền ảnh (dành cho máy tính).

Mã (Thiết bị di động)

Trong ví dụ trước, Tokopedia đã sử dụng dòng thời gian tiến trình cuộn ẩn danh. Trong mã sau, redBus sử dụng tiến trình xem có tên theo dòng thời gian. Ảnh động này thay đổi opacity và clip-path của phần tử <img> trong animation-range đã xác định bên trong trình cuộn tổ tiên gần nhất của phần tử, trong trường hợp này là trình cuộn thư viện ảnh.

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%;
   }
`;

Chúng tôi rất vui khi thấy tính năng này vì đây là sự kết hợp hoàn hảo giữa hiệu suất và trải nghiệm tốt hơn, giúp tăng cường tín hiệu Trải nghiệm trang cho SEO. Ngoài ra, đường cong học tập tối thiểu khiến nó trở thành một công cụ bắt buộc phải có cho mọi trang web thương mại điện tử. Chúng tôi cũng nhận được phản hồi tích cực và sự hỗ trợ từ các nhóm khác để tận dụng SDA cho nhiều hành trình của người dùng hơn. – Amit Kumar, Giám đốc kỹ thuật cấp cao, redBus.

Policybazaar

So sánh các gói bảo hiểm là một hành động chính lặp lại mà người dùng thực hiện để định hướng quá trình đưa ra quyết định của họ. Bằng cách sử dụng ảnh động dựa trên thao tác cuộn, Policybazaar đã giảm kích thước của các phần tử có mức độ ưu tiên thấp để phản hồi thao tác cuộn bảng của người dùng. Nhờ đó, người dùng có trải nghiệm di chuyển mượt mà, đồng thời cải thiện khả năng đọc.

Với ảnh động dựa trên thao tác cuộn, chúng tôi có thể tối đa hoá không gian khung nhìn để người dùng so sánh các gói, đảm bảo trải nghiệm đọc tập trung và không bị rối mắt.—Rishabh Mehrotra, Trưởng nhóm thiết kế cho đơn vị kinh doanh bảo hiểm nhân thọ, PolicyBazaar.

Mã

Tương tự như ví dụ trước của Tokopedia, Policybazaar đang sử dụng hàm scroll() để đặt dòng thời gian tiến trình cuộn ẩn danh để kiểm soát tiến trình của ảnh động CSS. Trong trường hợp này, kích thước phông chữ sẽ giảm và tiêu đề sẽ mờ dần dựa trên vị trí cuộn trong animation-range đã xác định.

@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;
  }
}

Ảnh động dựa trên thao tác cuộn là một mẫu phổ biến trong hành trình của người dùng

Tất cả các công ty thương mại điện tử được giới thiệu đều sử dụng Ảnh động dựa trên thao tác cuộn trên các trang có thẻ, tạo ảnh động cho thẻ để thu hút sự chú ý của người dùng vào các thẻ đó . Các ví dụ sau đây cho thấy hiệu ứng cuộn trên thẻ ở nhiều phần trong hành trình của người dùng. Điều này thường đạt được bằng cách sử dụng dòng thời gian tiến trình xem ẩn danh để kiểm soát tiến trình của ảnh động CSS tuỳ chỉnh, như minh hoạ trong đoạn mã CSS sau.

@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 (Trang chủ)

Policybazaar (Trang thông tin sản phẩm)

Tokopedia (Trang chi tiết sản phẩm)

Những điều cần cân nhắc khi sử dụng Scroll-driven Animations API

Bạn có thể sử dụng polyfill cho các ảnh động dựa trên thao tác cuộn đối với những trình duyệt không hỗ trợ, chẳng hạn như bằng polyfill dòng thời gian cuộn. Nếu bạn làm như vậy, bạn sẽ cần kiểm thử thêm để đảm bảo rằng nó hoạt động tốt cùng với khung của bạn và các trình duyệt sử dụng polyfill không gặp phải lỗi hoạt ảnh hoặc trải nghiệm giật.

Từ CSS, bạn có thể sử dụng @supports để kiểm tra khả năng hỗ trợ animation-timeline trước khi sử dụng ảnh động dựa trên thao tác cuộn. Ví dụ:

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

}

Tài nguyên

• Bản minh hoạ ảnh động dựa trên thao tác cuộn
• Tạo ảnh động cho các phần tử khi cuộn bằng Ảnh động dựa trên thao tác cuộn
• Lớp học lập trình: Bắt đầu sử dụng hiệu ứng động dựa trên thao tác cuộn trong CSS
• Tiện ích Chrome: Trình gỡ lỗi ảnh động dựa trên thao tác cuộn
• Scroll-timeline Polyfill
• Bạn muốn báo cáo lỗi hoặc đề xuất tính năng mới? Chúng tôi muốn lắng nghe ý kiến của bạn!

Khám phá các bài viết khác trong loạt bài này để tìm hiểu cách các công ty thương mại điện tử hưởng lợi từ việc sử dụng CSS và các tính năng mới trên giao diện người dùng, chẳng hạn như hiệu ứng chuyển đổi khung hiển thị, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().

• Tại sao các chức năng của giao diện người dùng trên web lại quan trọng đối với trang web thương mại điện tử của bạn?
• Xem nghiên cứu điển hình về hiệu ứng chuyển cảnh
• Nghiên cứu điển hình về Popover API
• Nghiên cứu điển hình về Container Queries
• Nghiên cứu điển hình về bộ chọn:has()