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

Swetha Gopalakrishnan

Saurabh Rajpal

Ảnh động do cuộn điều khiển là một mẫu trải nghiệm người dùng phổ biến trên web. Ảnh động do cuộn điều khiển được liên kết với vị trí cuộn của vùng chứa 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ẽ quét tới hoặc lui để phản hồi trực tiếp. Ví dụ về điều này là các hiệu ứng như hình ảnh nền có hiệu ứng thị sai hoặc chỉ báo đọc di chuyển khi bạn cuộn.

Các nhà phát triển thường tạo ảnh động do 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 khiến bạn khó tạo ảnh động hiệu quả do cuộn đồ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 các tính năng mới về giao diện người dùng và CSS sẽ ra mắt trong trình duyệt, giờ đây, bạn có thể tạo ảnh động do cuộn khai báo. Với Dòng thời gian cuộn và Dòng thời gian khung hiển thị, các khái niệm mới tích hợp với API ảnh động trên web (WAAPI) và API ảnh động CSS hiện có, giờ đây, bạn có thể có ảnh động mượt mà do cuộn chạy trên luồng chính, chỉ với 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 tận dụng tính năng mới này.

Tokopedia

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

Chúng tôi đã giảm được tới 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 còn 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 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 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 nơi tham quan. Trang đích này xuất hiện ở đầu phễu chuyển đổi cho tất cả người dùng. Với ảnh động do cuộn, họ có thể thay thế các phương thức triển khai JavaScript tuỳ chỉnh này bằng CSS để đạt được cùng một hiệu ứng.

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

Thư viện ảnh có tính năng Hiện hình ảnh (dành cho thiết bị di động) và Luồng ảnh bìa (dành cho máy tính).

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

Trong ví dụ trước, Tokopedia đã sử dụng tiến trình cuộn ẩn danh. Trong mã sau, redBus sử dụng tiến trình xem có tên. Ảnh động thay đổi opacity và clip-path của phần tử <img> trong animation-range đã xác định bên trong thanh cuộn gốc gần nhất của phần tử, trong trường hợp này là thanh 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 các tín hiệu Trải nghiệm trang cho SEO. Ngoài ra, độ dốc học tập tối thiểu khiến đây trở thành một công cụ không thể thiếu đối với 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ợ của các nhóm khác để tận dụng SDA cho nhiều hành trình người dùng hơn.— Amit Kumar, Nhà quản lý 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 đi lặp lại mà người dùng thực hiện để định hướng quá trình đưa ra quyết định. Bằng cách sử dụng ảnh động do thao tác cuộn, Policybazaar đã thu nhỏ 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. Điều này mang lại trải nghiệm cuộn mượt mà đồng thời cải thiện khả năng đọc.

Với ảnh động do 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 bảo hiểm, đảm bảo trải nghiệm đọc tập trung và không lộn xộn. – Rishabh Mehrotra, Trưởng bộ phận Thiết kế cho BU Bảo hiểm nhân thọ, PolicyBazaar.

Mã

Tương tự như ví dụ trước từ Tokopedia, Policybazaar đang sử dụng hàm scroll() để đặt tiến trình cuộn ẩn danh nhằm kiểm soát tiến trình của ảnh động CSS. Trong trường hợp này, hãy thu nhỏ kích thước phông chữ và làm mờ tiêu đề 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 do cuộn tạo ra 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 do Cuộn điều khiển trên các trang có thẻ, ảnh động thẻ để thu hút sự chú ý của người dùng . 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 được thực hiện bằng cách sử dụng 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 API Ảnh động do cuộn

Bạn có thể polyfill ảnh động do thao tác cuộn cho các trình duyệt không hỗ trợ, chẳng hạn như bằng polyfill Scroll-timeline. Nếu bạn làm như vậy, bạn sẽ phải kiểm thử thêm để đảm bảo rằng polyfill hoạt động tốt cùng với khung và trình duyệt sử dụng polyfill không gặp lỗi ảnh động 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ợ của animation-timeline trước khi sử dụng ảnh động do cuộn. Ví dụ:

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

}

Tài nguyên

• Bản minh hoạ ảnh động do cuộn điều khiển
• Tạo ảnh động cho các phần tử khi cuộn bằng ảnh động do Cuộn điều khiển
• Lớp học lập trình: Bắt đầu với ảnh động do cuộn điều khiển trong CSS
• Tiện ích Chrome: Trình gỡ lỗi ảnh động do cuộn điều khiể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 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 các tính năng mới của CSS và giao diện người dùng, chẳng hạn như Chuyển đổi thành phần 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 Khả năng giao diện người dùng web lại quan trọng đối với trang web thương mại điện tử của bạn?
• Xem các nghiên cứu điển hình về tính năng Chuyển đổi
• Nghiên cứu điển hình về API cửa sổ bật lên
• Nghiên cứu điển hình về Truy vấn vùng chứa
• Nghiên cứu điển hình về bộ chọn:has()