ขอแนะนำ "ปลดปล่อยพลังของภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน"

Bramus

เราขอประกาศเปิดตัว"ปลดปล่อยพลังของภาพเคลื่อนไหวที่ทำงานตามการเลื่อน" ซึ่งเป็นหลักสูตรวิดีโอ 10 ตอนที่จะให้ข้อมูลทั้งหมดเกี่ยวกับภาพเคลื่อนไหวที่ทำงานตามการเลื่อนโดยใช้ CSS หรือ JavaScript

คุณดูซีรีส์บน YouTube ได้ เราได้ฝังตอนแรกไว้ที่นี่

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนช่วยให้คุณใช้ภาพเคลื่อนไหว CSS หรือ WAAPI ที่มีอยู่และทำให้เคลื่อนไหวเมื่อเลื่อนได้ ด้วยเหตุนี้ ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนจึงได้รับประโยชน์ทั้งหมดที่ API เหล่านี้มอบให้ ซึ่งรวมถึงภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนที่เร่งด้วยฮาร์ดแวร์ซึ่งไม่ก่อให้เกิดการกระตุกเมื่อเธรดหลักถูกบล็อก

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนมีให้บริการใน Chrome ตั้งแต่ Chrome 115 และเป็นตัวเลือกที่เหมาะสําหรับการปรับปรุงแบบเป็นขั้นเป็นตอน

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

ดูชุดวิดีโอหรืออ่านเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวที่ทำงานตามการเลื่อน

ตอน

หลักสูตรนี้ประกอบด้วย 10 ตอนและแบ่งออกเป็น 2 ส่วนหลักๆ ได้แก่ คำอธิบายแนวคิดหลักที่ประกอบเป็นภาพเคลื่อนไหวที่ทำงานด้วยการเลื่อน และตัวอย่างการใช้งานจริง 2-3 รายการ

  1. ตอนที่ 1: ข้อมูลเบื้องต้น
  2. ตอนที่ 2: แนวคิดหลัก: scroll() และ ScrollTimeline
  3. ตอนที่ 3: แนวคิดหลัก: view() และ ViewTimeline
  4. ตอนที่ 4: แนวคิดหลัก: ไขข้อสงสัยเกี่ยวกับช่วงไทม์ไลน์
  5. ตอนที่ 5: แนวคิดหลัก: การค้นหาไทม์ไลน์และไทม์ไลน์ที่มีชื่อ
  6. ตอนที่ 6: การใช้งานจริง: เพิ่มเงาการเลื่อนไปยังคอนเทนเนอร์การเลื่อน
  7. ตอนที่ 7: การใช้งานจริง: ทำให้องค์ประกอบเคลื่อนไหวในทิศทางต่างๆ
  8. ตอนที่ 8: การใช้งานจริง: เคลื่อนไหวโมเดล 3 มิติและอื่นๆ เมื่อเลื่อนดู
  9. ตอนที่ 9: การใช้งานจริง: การตรวจจับความเร็วในการเลื่อน
  10. ตอนที่ 10: Outro

เราขอแนะนำให้ดูตอนต่างๆ ตามลำดับ เนื่องจากตอนต่างๆ จะต่อยอดจากเดโมและเทคนิคที่ครอบคลุมในตอนแรกๆ คุณสามารถดูเดโมและเครื่องมือที่แสดงในแต่ละตอนทางออนไลน์และลิงก์ในคำอธิบาย

แหล่งข้อมูลเพิ่มเติม