IntersectionObserver · CSS · WAAPI
ทำให้เว็บมีชีวิต
เลื่อนหน้าลงไปเรื่อย ๆ — เนื้อหาจะค่อย ๆ โผล่ขึ้นมา เลื่อนออกแล้วกลับมาก็เล่นใหม่ได้. ทั้งหน้าใช้ของในเบราว์เซอร์ล้วน (ไม่มีไลบรารี): IntersectionObserver จับว่าเลื่อนถึงไหน + CSS transition + Web Animations API · เคารพ prefers-reduced-motion (ตั้งลดการเคลื่อนไหว = โชว์นิ่ง)
1 · Scroll Reveal
บล็อกพวกนี้ซ่อนอยู่ พอเลื่อนเข้ามาในจอถึงจะ fade + เลื่อนขึ้น (เพิ่ม class .in ด้วย IntersectionObserver) · เลื่อนออกจอแล้วกลับเข้ามา = เล่นซ้ำ
การ์ด A
การ์ด B
การ์ด C
การ์ด D
การ์ด E
การ์ด F
2 · Number Counter
ตัวเลขนับขึ้นตอนเลื่อนมาเห็น (requestAnimationFrame + ease)
0
particles
0
fps
0
smooth
3 · Micro-interactions
ปุ่มเด้งแบบสปริงตอน hover (cubic-bezier overshoot) + การ์ดเอียง 3D ตามเมาส์
การ์ดเอียง 3D
ขยับเมาส์บนตัวผม
4 · SVG Path Draw
เส้นวาดตัวเองตอนเลื่อนมาเห็น (เล่นกับ stroke-dashoffset)