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

Swetha Gopalakrishnan

Saurabh Rajpal

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

Nhà phát triển thường tạo ảnh động dựa trên 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 hiệu suất 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 đang ở trên luồng chính.

Tuy nhiên, như một phần của tính năng mới Các tính năng CSS và giao diện người dùng xuất hiện trong trình duyệt, bạn có thể bây giờ tạo ảnh động khai báo dựa trên cuộn. Có tính năng dòng thời gian và chế độ xem cuộn Tiến trình, những khái niệm mới tích hợp với API Ảnh động trên web (WAAPI) và API Ảnh động của CSS, giờ đây bạn có thể có lông mượt như lụa các ảnh động điều khiển cuộn chạy ngoài luồng chính, chỉ với một vài dòng . Trong nghiên cứu điển hình này, hãy tìm hiểu xem Tokopedia, redBus và Policybazaar đã được hưởng lợi từ tính năng mới này.

Hỗ trợ trình duyệt

• 115
• 115
• 
• dấu x

Nguồn

Lưu ý: Để tìm hiểu cách triển khai ảnh động theo hướng cuộn trong trang web của bạn bằng cách sử dụng các API mới sẽ đọc Tạo ảnh động cho các phần tử khi cuộn bằng ảnh động dựa trên cuộn của Bramus.

Tokopedia

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

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

Chế độ hiển thị thay đổi dạng ảnh động của thanh cố định trên cùng dựa trên thao tác cuộn của người dùng tr.bình.

Mã

Cách triển khai sau đây sử dụng hàm scroll() để đặt cuộn ẩn danh tiến trình để kiểm soát tiến trình của ảnh động CSS. Chiến lược phát hành đĩa đơn chế độ hiển thị của thanh cố định trên cùng thay đổi theo 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 để bàn trên trang đích điều cần làm, được hiển thị ở đầu phễu chuyển đổi cho tất cả người dùng. Với hoạt ảnh di chuyển, có thể thay thế các phương pháp triển khai JavaScript tuỳ chỉnh này bằng CSS để đạt được để có được hiệu quả tương tự.

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

Thư viện Ảnh với tính năng Hiển thị hình ảnh (cho thiết bị di động) và Luồng bìa (cho Máy tính).

Hình ảnh động theo hướng cuộn cho thấy hiệu ứng khi tải hình ảnh trên RedBus " Things To Do" (Việc cần làm) thư viện ảnh.

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

Trong ví dụ trước, Tokopedia đã sử dụng tiến trình cuộn ẩn danh dòng thời gian. Trong mã sau, redBus sử dụng tiến trình xem đã đặt tên dòng thời gian. Ảnh động thay đổi opacity và clip-path của <img> phần tử thuộc animation-range đã xác định bên trong phần tử gần nhất Trình cuộn đối tượng cấp trên, 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à một sự kết hợp hoàn hảo giữa hiệu suất với trải nghiệm tốt hơn, giúp tăng cường tín hiệu Trải nghiệm trên trang về SEO. Phía trên nhờ đó, công nghệ học máy trở nên thiết yếu đối với mọi hoạt động thương mại điện tử của bạn. Chúng tôi cũng nhận được ý kiến 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, Kỹ thuật cấp cao Người quản lý, redBus.

Policybazaar

So sánh các gói bảo hiểm là một hành động quan trọng lặp đi lặp lại mà người dùng thực hiện để hướng dẫn quá trình ra quyết định. Bằng cách sử dụng hoạt ảnh di chuyể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 việc người dùng cuộn bảng. Chiến dịch này mang lại trải nghiệm cuộn nhẹ nhàng trong khi vẫn cải thiện khả năng đọc.

Với hoạt ảnh theo hướng cuộn, chúng tôi có thể tối đa hoá không gian khung nhìn cho người dùng để so sánh các gói, đảm bảo việc đọc tập trung và không lộn xộn của Google.—Rishabh Mehrotra, Trưởng ban Thiết kế cho Công ty bảo hiểm nhân thọ, PolicyBazaar.

Ảnh động di chuyển animate-timeline trên bảng kế hoạch so sánh trong phần Đầu tư và Cuộc sống LOB (Lĩnh vực kinh doanh).

Mã

Tương tự như ví dụ trước của Tokopedia, Policybazaar đang sử dụng Hàm scroll() để đặt tiến trình cuộn ẩn danh cho kiểm soát tiến trình của ảnh động CSS. Trong trường hợp này, thu nhỏ phông chữ và làm mờ tiêu đề dựa trên vị trí cuộn trong phần tử được xác định 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;
  }
}

Các ảnh động di chuyển theo hướng cuộn dưới dạng một mẫu chung trên 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ử nổi bật đều sử dụng ảnh động dựa trên cuộn trên các trang bằng thẻ, các thẻ tạo ảnh động để thu hút sự chú ý của người dùng . Chiến lược phát hành đĩa đơn các ví dụ sau đây cho thấy hiệu ứng cuộn trên thẻ ở các phần khác nhau của người dùng hành trình. Điều này thường đạt được bằng cách sử dụng dòng thời gian tiến trình chế độ 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ủ)

Hiệu ứng hoạt ảnh di chuyển theo hướng di chuyển để tải thẻ sản phẩm trên RedBus " Things To Do" (Việc cần làm) trang đích.

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

Các thẻ sản phẩm mờ dần trong dòng đầu tư và cuộc sống theo hướng cuộn (Ngành nghề kinh doanh).

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

Ảnh động với hiệu ứng mờ dần trong khi cuộn qua các sản phẩm trong danh sách.

Những điều cần xem xét khi sử dụng API Ảnh động dựa trên cuộn

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

Từ CSS, bạn có thể sử dụng @supports để kiểm thử khả năng hỗ trợ của ảnh động – dòng thời gian trước khi sử dụng ảnh động dựa trên cuộn. Ví dụ:

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

}

Tài nguyên

• Bản minh hoạ ảnh động theo hướng cuộn
• Tạo ảnh động cho các phần tử khi cuộn bằng ảnh động dựa trên cuộn
• Lớp học lập trình: Bắt đầu sử dụng ảnh động dựa trên thao tác cuộn trong CSS
• Tiện ích của Chrome: Trình gỡ lỗi ảnh động dựa trên thao tác cuộn
• Polyfill dòng thời gian cuộn
• Bạn có muốn báo cáo lỗi hoặc tính năng mới không? 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 nói về lợi ích của các công ty thương mại điện tử khi sử dụng các tính năng mới về CSS và giao diện người dùng, chẳng hạn như Chuyển đổi chế độ xem, Cửa sổ bật lên, Truy vấn vùng chứa và bộ chọn has().

• Tại sao Chức năng của 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 nghiên cứu điển hình về việc chuyển đổi
• Nghiên cứu điển hình về API Popover
• Nghiên cứu điển hình về Cụm từ tìm kiếm về vùng chứa
• :has() chọn trường hợp nghiên cứu