การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน
เริ่มภาพเคลื่อนไหว CSS เมื่อองค์ประกอบเข้าสู่พื้นที่แสดงผล
การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
เป้าหมาย
แอนิเมชันที่เชื่อมโยงกับการเลื่อนจะเล่น หยุดชั่วคราว หรือย้อนกลับตามการมองเห็นขององค์ประกอบ ตัวอย่างเช่น แอนิเมชันค่อย ๆ ปรากฏของส่วนฮีโร่เมื่อส่วนนั้นเลื่อนเข้าสู่พื้นที่มองเห็น ตัวเลขที่เพิ่มค่าขึ้นเมื่อมองเห็น และเอฟเฟกต์พารัลแลกซ์ที่เชื่อมโยงกับตำแหน่งการเลื่อน IntersectionObserver เป็นตัวเรียกแอนิเมชัน ส่วน CSS หรือ API แอนิเมชันบนเว็บเป็นตัวทำงาน
แอนิเมชันตามตัวกระตุ้น
รูปแบบที่ง่ายที่สุดคือ เมื่อองค์ประกอบเข้าสู่พื้นที่มองเห็น ให้เพิ่มคลาส CSS ที่มีแอนิเมชัน entry.target.classList.add("in-view") ในฟังก์ชันเรียกกลับของตัวเฝ้าดู ส่วนคลาสจะกำหนด animation: fade-in 600ms forwards
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}การตั้งค่าตัวเฝ้าดู
สร้างตัวเฝ้าดูร่วม เฝ้าดูทุกองค์ประกอบที่มีคลาสตัวกระตุ้น เพิ่มคลาส "อยู่ในมุมมอง" เมื่อองค์ประกอบเข้าสู่พื้นที่ที่เฝ้าดู และยกเลิกการเฝ้าดูเพื่อป้องกันการเรียกซ้ำ สำหรับแอนิเมชันที่ทำงานครั้งเดียว เท่านี้ก็เพียงพอแล้ว หากต้องการให้ทำงานซ้ำเมื่อเข้าสู่พื้นที่อีกครั้ง อย่ายกเลิกการเฝ้าดู และนำคลาสออกเมื่อองค์ประกอบออกจากพื้นที่
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));เอฟเฟกต์การหน่วงลำดับ
หากต้องการให้รายการแสดงตามลำดับ ให้ใช้การหน่วงเวลารายการละค่าโดยใช้คุณสมบัติกำหนดเองของ CSS: style="--delay: ${i * 100}ms" กับแต่ละรายการ แอนิเมชันจะอ่านค่า animation-delay: var(--delay) รายการต่าง ๆ จะแสดงต่อเนื่องกันเป็นทอด ๆ เมื่อรายการเลื่อนเข้าสู่พื้นที่มองเห็น
เกณฑ์สำหรับการเรียกใช้เร็วขึ้น
threshold: 0.2 จะทำงานเมื่อมองเห็นองค์ประกอบ 20% ซึ่งโดยทั่วไปเป็นจังหวะที่ดีสำหรับแอนิเมชัน "อยู่ในมุมมอง" threshold: 0 ทำงานเร็วเกินไป (เพียงมองเห็นหนึ่งพิกเซล) และดูฉับพลัน ส่วน threshold: 1 ทำงานช้าเกินไป (ต้องมองเห็นทั้งหมด) และให้ความรู้สึกล่าช้า
แอนิเมชันที่เชื่อมโยงกับการเลื่อนเทียบกับแอนิเมชันที่เรียกใช้ด้วยการเลื่อน
แอนิเมชันที่เรียกใช้ด้วยการเลื่อนจะเล่นครั้งเดียวเมื่อองค์ประกอบเข้าสู่พื้นที่ที่เฝ้าดู (อธิบายไปแล้วข้างต้น) ส่วนแอนิเมชันที่เชื่อมโยงกับการเลื่อนจะคืบหน้าไปพร้อมกับตำแหน่งการเลื่อน วิธีสมัยใหม่คือใช้แอนิเมชันของ CSS ที่ขับเคลื่อนด้วยการเลื่อน (เส้นเวลาของแอนิเมชันตามการเลื่อน) โดย IntersectionObserver ยังคงมีประโยชน์สำหรับการเข้าสู่และออกจากโซนตัวกระตุ้น
หลีกเลี่ยงการคำนวณการจัดวางซ้ำ ๆ
ทำแอนิเมชันกับคุณสมบัติที่ GPU สามารถแปลงได้อย่างประหยัด เช่น การแปลงและความทึบแสง หลีกเลี่ยงการทำแอนิเมชันกับตำแหน่งด้านบน ตำแหน่งด้านซ้าย ความกว้าง และความสูง เพราะคุณสมบัติเหล่านี้จะทำให้เกิดการคำนวณการจัดวางใหม่ทุกเฟรม ส่งผลให้แอนิเมชันที่ผูกกับการเลื่อนกระตุกบนอุปกรณ์ระดับกลาง
เคารพการลดการเคลื่อนไหว
ครอบการประกาศแอนิเมชันไว้ใน @media (prefers-reduced-motion: no-preference) เพื่อให้ผู้ใช้ที่ขอให้ลดการเคลื่อนไหว (เช่น ผู้มีความผิดปกติของระบบทรงตัวหรือมีความไวต่อการเคลื่อนไหว) เห็นสถานะสุดท้ายแบบคงที่โดยไม่มีการเคลื่อนไหว แอนิเมชันเพื่อการตกแต่งควรปิดใช้งานทั้งหมดเมื่อมีการลดการเคลื่อนไหว
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}รูปแบบเพื่อประสิทธิภาพ
ใช้ตัวเฝ้าดูร่วมเพียงตัวเดียว ไม่ใช่หนึ่งตัวต่อหนึ่งองค์ประกอบ ใช้ unobserve เมื่อแอนิเมชันที่ทำงานครั้งเดียวทำงานแล้ว ใช้การระบุคุณสมบัติที่จะเปลี่ยนแปลงอย่างประหยัด เฉพาะกับองค์ประกอบที่กำลังทำแอนิเมชันอยู่ และนำการระบุนี้ออกเมื่อแอนิเมชันสิ้นสุด ตรวจสอบแผงประสิทธิภาพเพื่อดูเฟรมที่แสดงไม่ทัน
แอนิเมชันสองทิศทาง
สำหรับแอนิเมชันที่ควรย้อนกลับเมื่อองค์ประกอบออกจากพื้นที่มองเห็น อย่ายกเลิกการเฝ้าดู ในฟังก์ชันเรียกกลับ ให้สลับคลาสตาม isIntersecting: entry.target.classList.toggle("in-view", entry.isIntersecting) แอนิเมชันจะทำงานไปข้างหน้าเมื่อเข้าสู่พื้นที่ และย้อนกลับเมื่อออกจากพื้นที่
การผสานกับ API แอนิเมชันบนเว็บ
สำหรับแอนิเมชันที่ควบคุมด้วย JS ให้แทนที่ classList.add ด้วย entry.target.animate(keyframes, options) WAAPI จะส่งคืนออบเจ็กต์แอนิเมชันที่คุณสามารถหยุดชั่วคราว ย้อนกลับ หรือเชื่อมลำดับด้วยพรอมิสได้ จึงยืดหยุ่นกว่า CSS สำหรับลำดับที่ซับซ้อน
ตรวจสอบความรู้
เหตุใดจึงควรทำแอนิเมชันกับการแปลงและความทึบแสง แทนการทำแอนิเมชันกับคุณสมบัติตำแหน่งและขนาดในการทำแอนิเมชันที่เชื่อมโยงกับการเลื่อน
สรุป
แอนิเมชันที่เชื่อมโยงกับการเลื่อนผสาน IntersectionObserver เข้ากับคลาสแอนิเมชันของ CSS หรือ WAAPI กำหนดสถานะซ่อน เพิ่มคลาส "อยู่ในมุมมอง" เมื่อองค์ประกอบเข้าสู่พื้นที่ที่เฝ้าดู ทำแอนิเมชันกับการแปลงและความทึบแสง ไม่ใช่คุณสมบัติตำแหน่ง เคารพ prefers-reduced-motion และใช้คุณสมบัติกำหนดเองของ CSS เพื่อหน่วงเวลาให้รายการแสดงต่อเนื่องกัน สำหรับแอนิเมชันที่แสดงความคืบหน้าตามการเลื่อนโดยสมบูรณ์ ให้พิจารณาแอนิเมชันดั้งเดิมที่ขับเคลื่อนด้วยการเลื่อน (เส้นเวลาของแอนิเมชันตามการเลื่อน)
คำถามที่พบบ่อย
บทเรียน “การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน”
เริ่มภาพเคลื่อนไหว CSS เมื่อองค์ประกอบเข้าสู่พื้นที่แสดงผล คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- IntersectionObserver API และค่าเกณฑ์
- การโหลดแบบขี้เกียจด้วย IntersectionObserver
- การใช้งานการเลื่อนแบบไม่สิ้นสุด
- การตั้งค่าภาพเคลื่อนไหวที่เชื่อมโยงกับการเลื่อน