Có gì mới với ảnh động khi cuộn?
Ảnh động hướng cuộn là một cách để thêm tính tương tác và sở thích trực quan vào trang web hoặc ứng dụng web của bạn, được kích hoạt bởi vị trí cuộn của người dùng. Đây có thể là một cách hiệu quả để thu hút người dùng và làm cho trang web của bạn trở nên bắt mắt hơn.
Trước đây, cách duy nhất để tạo ảnh động hướng cuộn là phản hồi sự kiện cuộn trên luồng chính. Điều này gây ra hai sự cố lớn:
- Thao tác cuộn được thực hiện trên một luồng riêng biệt, do đó phân phối các sự kiện cuộn một cách không đồng bộ.
- Các ảnh động của luồng chính có thể bị giật.
Điều này khiến việc tạo ảnh động hiệu quả khi cuộn đồng bộ với thao tác cuộn là không thể hoặc rất khó khăn.
Chúng tôi sắp ra mắt một bộ API mới để hỗ trợ ảnh động theo hướng cuộn mà bạn có thể sử dụng trong CSS hoặc JavaScript. API cố gắng sử dụng ít tài nguyên luồng chính nhất có thể, giúp triển khai ảnh động theo hướng cuộn dễ dàng hơn và cũng mượt mà hơn nhiều. API ảnh động theo hướng cuộn hiện được hỗ trợ trong các trình duyệt sau:
Bài viết này so sánh phương pháp mới với kỹ thuật JavaScript cổ điển để cho thấy mức độ dễ dàng và mượt mà khi sử dụng API mới.
API CSS hoạt ảnh theo hướng cuộn so với JavaScript cổ điển
Thanh tiến trình mẫu sau đây được tạo bằng kỹ thuật JavaScript của lớp.
Tài liệu này phản hồi mỗi khi xảy ra sự kiện scroll để tính tỷ lệ phần trăm scrollHeight mà người dùng đã cuộn đến.
document.addEventListener("scroll", () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progress").style.width = scrolled + "%";
})
Bản minh hoạ sau đây cho thấy cùng một thanh tiến trình sử dụng API mới với CSS.
@keyframes grow-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#progress {
animation: grow-progress auto linear forwards;
animation-timeline: scroll(block root);
}
Tính năng CSS animation-timeline mới tự động chuyển đổi một vị trí trong phạm vi cuộn thành tỷ lệ phần trăm tiến trình, do đó thực hiện tất cả các thao tác phức tạp.
Sau đây là phần thú vị. Giả sử bạn đã triển khai một phép tính quá tốn kém trên cả hai phiên bản trang web, vốn chiếm hầu hết tài nguyên của luồng chính.
function someHeavyJS(){
let time = 0;
window.setInterval(function () {
time++;
for (var i = 0; i < 1e9; i++) {
result = i;
}
console.log(time)
}, 100);
}
Như bạn có thể dự kiến, phiên bản JavaScript cũ sẽ trở nên giật và chậm do đường liên kết tài nguyên luồng chính. Mặt khác, phiên bản CSS hoàn toàn không bị ảnh hưởng bởi JavaScript nặng và có thể phản hồi các tương tác cuộn của người dùng.
Mức sử dụng CPU trong Công cụ cho nhà phát triển là hoàn toàn khác nhau, thể hiện trong ảnh chụp màn hình sau đây.
Bản minh hoạ sau đây minh hoạ một ứng dụng ảnh động dựa trên thao tác cuộn do CyberAgent tạo. Bạn có thể thấy ảnh mờ dần khi cuộn.
API JavaScript cho ảnh động hướng cuộn mới so với JavaScript cổ điển
Lợi ích của API mới không chỉ giới hạn ở CSS. Bạn cũng có thể tạo các hoạt ảnh cuộn cuộn mượt mà bằng cách sử dụng JavaScript. Hãy xem ví dụ sau:
const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: new ScrollTimeline({
source: document.documentElement,
}),
}
);
Tính năng này giúp bạn tạo ảnh động trên thanh tiến trình tương tự như trong bản minh hoạ CSS trước đó chỉ bằng JavaScript. Công nghệ cơ bản giống với phiên bản CSS. API cố gắng sử dụng ít tài nguyên luồng chính nhất có thể, giúp ảnh động mượt mà hơn nhiều so với phương pháp JavaScript cổ điển.
Ngoài ra, API mới này hoạt động cùng với API Ảnh động trên web (WAAPI) và API Ảnh động CSS hiện có để bật ảnh động khai báo theo thao tác cuộn.
Các bản minh hoạ và tài nguyên khác
Bạn có thể xem các cách triển khai khác nhau của ảnh động hướng cuộn qua trang web minh hoạ này. Tại đây, bạn có thể so sánh các bản minh hoạ bằng những API mới này của CSS và JavaScript.
Nếu bạn muốn tìm hiểu thêm về ảnh động mới bằng thao tác cuộn, hãy xem bài viết này và buổi trò chuyện tại I/O 2023!