CSS animation-trigger พร็อพเพอร์ตี้ใหม่คุมแอนิเมชัน
ทำความรู้จัก animation-trigger พร็อพเพอร์ตี้ CSS ใหม่จากข้อกำหนด Animation Triggers ที่ช่วยให้แอนิเมชันเริ่มเล่นเมื่อเกิดทริกเกอร์ รองรับแล้วใน Chrome 145+
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- animation-trigger หน่วงเวลาแอนิเมชันจนกว่าจะเกิดทริกเกอร์
- ต่างจาก scroll-driven ตรงที่เป็นแบบสถานะเปิด-ปิด
- ขอบเขตชื่อทริกเกอร์เป็นแบบโกลบอลและจำกัดได้ด้วย trigger-scope
- ปัจจุบันรองรับบนเบราว์เซอร์ Chrome 145 ขึ้นไป
พร็อพเพอร์ตี้ CSS animation-trigger ทำหน้าที่หน่วงเวลาการเริ่มเล่นแอนิเมชัน CSS จนกว่าจะเกิดทริกเกอร์เฉพาะเจาะจง โดยมันจะคอยฟังชื่อทริกเกอร์ที่กำหนดไว้และควบคุมการเล่นหรือหยุดพักของแอนิเมชันตามเหตุการณ์นั้น ข้อกำหนดนี้ถูกนิยามไว้ในสเปก Animation Triggers ซึ่งปัจจุบันยังอยู่ในสถานะ Editor's Drafts ทำให้รายละเอียดอาจมีการเปลี่ยนแปลงได้ในอนาคตก่อนที่จะกลายเป็น Candidate Recommendation อย่างเป็นทางการ
ในส่วนของขอบเขตชื่อทริกเกอร์ โดยค่าเริ่มต้นแล้วจะมีขอบเขตแบบโกลบอล หากมีหลายองค์ประกอบใช้ชื่อทริกเกอร์ซ้ำกัน องค์ประกอบที่อยู่ลำดับหลังสุดใน CSS cascade จะถูกเลือกใช้งาน แต่เราก็สามารถจำกัดขอบเขตของทริกเกอร์ให้แคบลงเฉพาะในส่วน DOM subtree ที่ต้องการได้ด้วยพร็อพเพอร์ตี้ trigger-scope
การทำความเข้าใจความแตกต่างระหว่าง scroll-triggered animations และ scroll-driven animations ถือเป็นเรื่องสำคัญ เนื่องจากแบบแรกจะทำงานแบบมีสถานะสองสถานะ (Binary state) เช่น เล่น หยุด หรือรีเซ็ต เมื่อเงื่อนไขในระยะที่กำหนดเป็นจริง แอนิเมชันจะเล่นต่อไปตามปกติโดยไม่ผูกติดกับระยะการเลื่อนหน้าจออีก ต่างจากแบบหลังที่แอนิเมชันจะเดินหน้าหรือถอยหลังตามสัดส่วนการเลื่อนหน้าจอแบบต่อเนื่อง
การใช้งานจริงมักจะต้องตั้งค่า timeline trigger ควบคู่กันไปก่อน เพื่อควบคุมว่าแอนิเมชันจะเริ่มต้นเมื่อใดตามตำแหน่งขององค์ประกอบภายในไทม์ไลน์ เช่น ตำแหน่งการเลื่อนหน้าจอหรือมุมมองวิวพอร์ต โดยมันจะทำงานเมื่อองค์ประกอบนั้นเข้าสู่ช่วงระยะการทำงานที่กำหนดไว้ (Activation range) นอกจากนี้ ทริกเกอร์และแอนิเมชันไม่จำเป็นต้องอยู่บนองค์ประกอบเดียวกัน เราสามารถกำหนด timeline-trigger ไว้ที่องค์ประกอบแม่ แล้วนำ animation-trigger ไปใช้กับองค์ประกอบลูกหลายตัวพร้อมกันเพื่อให้ทั้งหมดเคลื่อนไหวพร้อมกันเมื่อองค์ประกอบแม่เลื่อนเข้ามาในมุมมอง
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ตัวอย่างการใช้งานเบื้องต้นสำหรับการทำ text reveal แอนิเมชัน เมื่อผู้ใช้เลื่อนหน้าจอผ่านจุดทริกเกอร์ ตัวแอนิเมชันจะเริ่มทำงานและทำให้ข้อความค่อยๆ ปรากฏขึ้น โดยกำหนด timeline trigger บนองค์ประกอบทริกเกอร์ จากนั้นจึงใส่ animation-trigger พร้อมกับแอนิเมชันหลักให้กับข้อความที่ต้องการแสดงผล
สำหรับสถานะการรองรับบนเว็บไซต์เบราว์เซอร์ ในขณะที่เขียนบทนี้นั้น พร็อพเพอร์ตี้ animation-trigger รองรับการใช้งานบน Google Chrome เวอร์ชัน 145 ขึ้นไปเท่านั้น นักพัฒนาที่สนใจสามารถศึกษาเพิ่มเติมจากแหล่งข้อมูลอย่างเป็นทางการของทีมพัฒนา Chrome และบทความเกี่ยวกับ CSS Animation Triggers
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น