ตัวสร้าง CSS Scroll-Driven Animations
สร้าง CSS scroll-driven animations ด้วย animation-timeline: scroll() และ view() พร้อม live preview และปรับ keyframe ได้ คัดลอกโค้ดได้ทันที ไม่ต้องใช้ JavaScript
Loading tool...
ตัวสร้าง CSS Scroll-Driven Animations คืออะไร?
ตัวสร้าง CSS Scroll-Driven Animations ช่วยให้คุณสร้าง scroll-linked animations ทันสมัยด้วยคุณสมบัติ animation-timeline รองรับทั้ง scroll() และ view() timeline โดยไม่ต้องใช้ JavaScript เลย
ประโยชน์หลัก
- ไม่ต้องใช้ JavaScript scroll listener — animation เป็น CSS ล้วน
- ประสิทธิภาพดีกว่าด้วยการติดตาม scroll แบบ native ของ browser
- ปรับ keyframe ได้แบบโต้ตอบ ทั้ง opacity, translate และ blur
- คัดลอก CSS พร้อมใช้ได้ทันที รองรับ modern Chromium browsers
กรณีการใช้งาน
- •เอฟเฟกต์ reveal-on-scroll สำหรับ section ใน landing page
- •scroll progress indicator และ reading bar
- •animation แบบ parallax สำหรับ background และรูปภาพ
- •การเปิดเผยเนื้อหาแบบค่อยเป็นค่อยไปในบทความยาว
วิธีใช้ตัวสร้าง CSS Scroll-Driven Animations
- เลือกประเภท timeline: เลือก view() เพื่อ animate เมื่อ element เข้า viewport หรือ scroll() เพื่อผูก animation กับความคืบหน้าของ container
- เลือกแกน: เลือก block, inline, x หรือ y ตามทิศทาง scroll ที่ต้องการติดตาม
- ตั้งค่า keyframe: ปรับ start/end opacity, ระยะ translateY และ blur ด้วย slider เพื่อกำหนดสถานะ from และ to
- คัดลอก CSS: คลิกคัดลอกเพื่อได้ animation-timeline snippet แบบเต็มแล้ววางใน stylesheet ทดสอบบน Chrome 115+
คุณสมบัติหลัก
- Live preview แบบเลื่อนได้เพื่อทดสอบ animation แบบเรียลไทม์
- สลับระหว่าง scroll() และ view() timeline ได้ทันที
- ปรับ opacity, translateY และ blur ด้วย slider
- 8 easing presets รวม spring bounce และ steps
- คัดลอก timeline declaration หรือ CSS snippet แบบเต็มได้