Ảnh động hướng cuộn là một mẫu trải nghiệm người dùng phổ biến trên web. Ảnh động dạng cuộ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ẽ tua về phía trước hoặc phía sau trong phản hồi trực tiếp. Ví dụ: các hiệu ứng như hình nền 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 theo hướng 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 khó tạo ảnh động hiệu quả dựa trên thao tác 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, là một phần của 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 theo hướng cuộn khai báo. Với Dòng thời gian cuộn và Dòng thời gian của chế độ xem, 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 cuộn mượt mà chạy ngoài luồng chính, chỉ với 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 ảnh động hướng 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ể 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 việc sử dụng các sự kiện cuộn JavaScript thông thường và quan sát thấy mức sử dụng CPU trung bình đã giảm từ 50% xuống còn 2% khi cuộn – Andy Wihalim, Kỹ sư phần mềm cao cấp, Tokopedia
Mã
Cách triển khai sau 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. Chế độ hiển thị của thanh cố định ở trên cùng thay đổi tuỳ 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 trên trang đích việc cần làm, xuất hiện ở đầu phễu chuyển đổi cho tất cả người dùng. Với ảnh động hướng cuộn, chúng có thể thay thế các cách triển khai JavaScript tuỳ chỉnh này bằng CSS để đạt được hiệu quả tương tự.
Trường hợp sử dụng
Thư viện ảnh có Image Reveal (cho thiết bị di động) và Cover Flow (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 tiến trình khung hiển thị được đặt tên. Ảnh động sẽ 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 đối tượng cấp trên gần nhất của phần tử. Trong trường hợp này, đó là trình cuộn của 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ì tính năng này là 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 các tín hiệu Trải nghiệm trên trang để tối ưu hoá cho công cụ tìm kiếm. Ngoài ra, đường cong học tập tối thiểu khiến nó trở thành một công cụ thiết yếu đối với mọi trang web thương mại điện tử. Chúng tôi cũng nhận được ý kiến phản hồi và sự hỗ trợ tích cực từ các nhóm khác nhằm tận dụng SDA cho nhiều hành trình hơn của người dùng. – 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 và được người dùng thực hiện nhiều lần để định hướng quá trình đưa ra quyết định. Bằng cách sử dụng ảnh động điều khiển bằng 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 khi người dùng cuộn bảng. Điều này mang lại trải nghiệm cuộn linh hoạt đồng thời cải thiện khả năng đọc.
Với ảnh động điều khiển bằng 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à gọn gàng.– Rishabh Mehrotra, Trưởng bộ phận Thiết kế cho Bảo hiểm Nhân thọ BU, PolicyBazaar.
animate-timeline trên bảng so sánh kế hoạch trong lĩnh vực Đầu tư và Nhân thọ
LOB (Dòng doanh nghiệp).Mã
Tương tự như ví dụ trước của Tokopedia, Policybazaar 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, việc 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 được 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 di chuyển dưới dạng một mẫu phổ biến 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 điều khiển cuộn trên các trang có thẻ, tạo ảnh động cho các thẻ để thu hút sự chú ý của người dùng . Các ví dụ sau đây minh hoạ hiệu ứng cuộn trên thẻ ở nhiều phần trong hành trình của người dùng. Bạn thường đạt được việc này bằng cách sử dụng tiến trình tiến trình của 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 đây.
@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 danh sách sản phẩm)
Tokopedia (Trang chi tiết sản phẩm)
Những điều cần xem xét khi sử dụng API Ảnh động cuộn theo hướng cuộn
Bạn có thể tạo ảnh động bằng polyfill cho các trình duyệt không hỗ trợ tính năng polyfill cho các trình duyệt, chẳng hạn như Scroll-Timeline polyfill. Nếu làm vậy, bạn sẽ phải kiểm thử thêm để đảm bảo khung hoạt động tốt cùng với khung của mình, đồng thời các trình duyệt sử dụng polyfill sẽ 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 thử khả năng hỗ trợ dòng thời gian của ảnh động trước khi sử dụng ảnh động theo thao tác cuộn. Ví dụ:
@supports (animation-timeline: scroll()) {
}
Tài nguyên
- Bản minh hoạ ảnh động hướng cuộn
- Tạo ảnh động cho các phần tử khi cuộn bằng ảnh động di chuyển dọc
- Lớp học lập trình: Bắt đầu sử dụng ảnh động theo hướng cuộn trong CSS
- Tiện ích của Chrome: Trình gỡ lỗi ảnh động di chuyển trên màn hình
- 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 được 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 về những lợi ích mà các công ty thương mại điện tử nhận được khi sử dụng các tính năng CSS và giao diện người dùng mới, chẳng hạn như hiệu ứng chuyển đổi thành khung hiển thị, cửa sổ bật lên, truy vấn vùng chứa và bộ chọn has().