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

Bramus

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

คุณสามารถดูซีรีส์บน YouTube ตอนแรกจะฝังอยู่ที่นี่

ภาพเคลื่อนไหวที่ใช้การเลื่อนใช่ไหม

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

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

การสนับสนุนเบราว์เซอร์

  • 115
  • 115
  • x

แหล่งที่มา

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

ตอน

หลักสูตรนี้ประกอบด้วย 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 มิติและอื่นๆ on Scroll
  9. ตอนที่ 9: การใช้งานจริง: การตรวจจับความเร็วในการเลื่อน
  10. ตอนที่ 10: ปิดท้าย

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

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