มีอะไรใหม่เกี่ยวกับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน คือวิธีเพิ่มการโต้ตอบและความสนใจทางภาพลงในเว็บไซต์หรือเว็บแอปพลิเคชัน ซึ่งเรียกให้แสดงจากตำแหน่งการเลื่อนของผู้ใช้ วิธีนี้เป็นวิธีที่ยอดเยี่ยมที่ทำให้ผู้ใช้มีส่วนร่วมและทำให้เว็บไซต์ดึงดูดสายตามากขึ้น
ที่ผ่านมา วิธีเดียวที่จะสร้างภาพเคลื่อนไหวจากการเลื่อนคือการตอบสนองต่อเหตุการณ์การเลื่อนในเทรดหลัก ซึ่งก่อให้เกิดปัญหาสำคัญ 2 ประการ ดังนี้
- การเลื่อนจะทำในเทรดแยกต่างหาก ดังนั้นจึงจะส่งเหตุการณ์การเลื่อนแบบไม่พร้อมกัน
- ภาพเคลื่อนไหวของเทรดหลักขึ้นอยู่กับความยุ่งยาก
จึงทำให้การสร้างภาพเคลื่อนไหวแบบเลื่อนที่มีประสิทธิภาพซึ่งซิงค์กับการเลื่อนหน้าเว็บไม่ได้หรือยากมาก
ตอนนี้เราขอแนะนำ API ชุดใหม่เพื่อรองรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน ซึ่งคุณจะใช้จาก CSS หรือ JavaScript ก็ได้ API พยายามใช้ทรัพยากรเทรดหลักให้น้อยที่สุดเท่าที่จะทำได้ ทำให้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนใช้งานได้ง่ายขึ้นมากและราบรื่นขึ้นด้วย ขณะนี้ API ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนได้รับการสนับสนุนในเบราว์เซอร์ต่อไปนี้
บทความนี้จะเปรียบเทียบวิธีการใหม่กับเทคนิค JavaScript แบบคลาสสิกเพื่อแสดงให้เห็นว่าภาพเคลื่อนไหวที่เกิดจากการเลื่อนด้วยการเลื่อนมีความนุ่มนวลและใช้งานง่ายเพียงใดเมื่อใช้ API ใหม่
CSS API ของภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเทียบกับ JavaScript แบบคลาสสิก
แถบความคืบหน้าตัวอย่างต่อไปนี้สร้างขึ้นโดยใช้เทคนิค JavaScript ของชั้นเรียน
เอกสารจะตอบกลับทุกครั้งที่เกิดเหตุการณ์ scroll เพื่อคำนวณเปอร์เซ็นต์ของ scrollHeight ที่ผู้ใช้เลื่อนดู
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 + "%";
})
การสาธิตต่อไปนี้แสดงแถบความคืบหน้าเดียวกันโดยใช้ API ใหม่กับ CSS
@keyframes grow-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#progress {
animation: grow-progress auto linear forwards;
animation-timeline: scroll(block root);
}
ฟีเจอร์ CSS แบบใหม่ของไทม์ไลน์ในภาพเคลื่อนไหว จะแปลงตำแหน่งในช่วงการเลื่อนเป็นเปอร์เซ็นต์ของความคืบหน้าโดยอัตโนมัติ จึงจะทำการลดน้ำหนักทั้งหมดไปพร้อมๆ กัน
ตอนนี้สำหรับส่วนที่น่าสนใจ สมมุติว่าคุณใช้การคำนวณที่หนักมากในเว็บไซต์ทั้ง 2 เวอร์ชัน ซึ่งอาจกินทรัพยากรของเทรดหลักไปเกือบทั้งหมด
function someHeavyJS(){
let time = 0;
window.setInterval(function () {
time++;
for (var i = 0; i < 1e9; i++) {
result = i;
}
console.log(time)
}, 100);
}
ตามที่คุณอาจคาดไว้ JavaScript เวอร์ชันเดิมอาจทำงานไม่เสถียรและช้าลงเนื่องจากมีการรวมทรัพยากรเทรดหลัก ในทางกลับกัน เวอร์ชัน CSS จะไม่ได้รับผลกระทบใดๆ จากการทำงานของ JavaScript ที่หนักหน่วง และสามารถตอบสนองต่อการโต้ตอบการเลื่อนของผู้ใช้ได้
การใช้งาน CPU แตกต่างกันอย่างสิ้นเชิงในเครื่องมือสำหรับนักพัฒนาเว็บ ดังที่แสดงในภาพหน้าจอต่อไปนี้
การสาธิตต่อไปนี้แสดงการประยุกต์ใช้ภาพเคลื่อนไหวจากการเลื่อนซึ่งสร้างโดย CyberAgent คุณจะเห็นว่ารูปภาพค่อยๆ ปรากฏขึ้นขณะที่คุณเลื่อน
JavaScript API ของภาพเคลื่อนไหวแบบใหม่ที่ขับเคลื่อนด้วยการเลื่อนเมื่อเทียบกับ JavaScript แบบเดิม
ประโยชน์ของ API ใหม่ไม่ได้จำกัดอยู่ที่ CSS เท่านั้น คุณสามารถสร้างภาพเคลื่อนไหวแบบเลื่อนที่ลื่นไหลโดยใช้ JavaScript ได้เช่นกัน โปรดดูตัวอย่างต่อไปนี้
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,
}),
}
);
ซึ่งทำให้คุณสามารถสร้างภาพเคลื่อนไหวในแถบความคืบหน้าแบบเดียวกับที่แสดงในการสาธิต CSS ก่อนหน้านี้โดยใช้เพียง JavaScript เทคโนโลยีพื้นฐานจะเหมือนกับเวอร์ชัน CSS API จะพยายามใช้ทรัพยากรเทรดหลักให้น้อยที่สุดเท่าที่จะทำได้ ทำให้ภาพเคลื่อนไหวลื่นไหลมากขึ้นเมื่อเทียบกับการใช้ JavaScript แบบคลาสสิก
นอกจากนี้ API ใหม่นี้ยังทำงานร่วมกับ Web Animations API (WAAPI) และ CSS Animations API ที่มีอยู่เพื่อเปิดใช้ภาพเคลื่อนไหวที่มาจากการเลื่อนแบบประกาศ
การสาธิตและแหล่งข้อมูลเพิ่มเติม
คุณสามารถตรวจสอบการใช้งานต่างๆ ของภาพเคลื่อนไหวจากการเลื่อนได้ในเว็บไซต์สาธิตนี้ ซึ่งคุณสามารถเปรียบเทียบการสาธิตโดยใช้ API ใหม่เหล่านี้จาก CSS และ JavaScript
หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวจากการเลื่อนแบบใหม่ โปรดดูบทความนี้และการบรรยายในงาน I/O 2023