Lab
✦ Motion Kit a11y-safe motion
accessible motion · drop-in kit

ใส่ของสวยได้เต็มที่
โดยไม่ทิ้งใครไว้ข้างหลัง

หมวดนี้คือเวอร์ชัน “เข้าถึงได้” ของ Web Animation — animation แบบเดียวกัน แต่ทุกตัว มี “เวอร์ชันเซฟ” สำหรับคนที่เปิด Reduce motion ในเครื่องไว้ในตัว เป็น drop-in หยิบ motion-kit.css + motion-kit.js ไปวางเว็บไหนก็ได้

กดสวิตช์ FULL / REDUCE (มุมขวาบน) ดูว่าคนตั้ง “ลดการเคลื่อนไหว” เห็นอะไร — ไม่ได้หายหมด แค่ตัดการขยับ เก็บ fade/สีไว้  ·  ตอนนี้: FULL
หรี่ความเร็ว animation ลงเพื่อดูทันทุกจังหวะ (มีผลกับทุกเดโม + ปุ่มเล่นซ้ำ):

1 · เลื่อนมาเจอ (Reveal)

โผล่ตอน element เข้าจอ · ตอน Reduce = โผล่เลย ไม่เลื่อน

data-mk="fade-up"
เลื่อนขึ้น 16px + จาง · Reduce: จางอย่างเดียว
ดูโค้ด 
<div data-mk="fade-up">…</div>
data-mk="scale-in"
ย่อจาก 0.96 (ไม่ใช่ 0) + จาง · Reduce: จางอย่างเดียว
ดูโค้ด 
<div data-mk="scale-in">…</div>
data-mk="blur-in"
เนื้อหาเบลอเข้ามา
เบลอ→คม + ขยับนิด · Reduce: จางอย่างเดียว ไม่เบลอ
ดูโค้ด 
<div data-mk="blur-in">…</div>
data-mk="clip"
รูป / การ์ด
เผยจากล่างขึ้น (clip-path) · Reduce: โชว์เต็มทันที
ดูโค้ด 
<img data-mk="clip" src="…">
data-mk="mask"
หัวข้อเลื่อนขึ้น
ตัวอักษรเลื่อนขึ้นจากใต้หน้ากาก · Reduce: โชว์ข้อความเฉยๆ
ดูโค้ด 
<span data-mk="mask">
  <span class="mk-mask__in">หัวข้อ</span>
</span>
data-mk-stagger
รายการที่ 1
รายการที่ 2
รายการที่ 3
ลูกเหลื่อมเวลา 70ms · Reduce: โผล่พร้อมกัน
ดูโค้ด 
<ul data-mk-stagger data-mk-step="70">
  <li data-mk="fade-up">…</li>
</ul>

2 · ตัวเลข · กราฟ · เส้น

ของที่ “เล่าข้อมูล” · ตอน Reduce = โชว์ค่าสุดท้ายทันที

data-mk-count
0
ก้าวเดินวันนี้
นับ 0→1,240 ตอนเข้าจอ · Reduce: เด้งเป็น 1,240 เลย
ดูโค้ด 
<span data-mk-count="1240"
      data-mk-count-dur="1500">0</span>
data-mk-progress
ความคืบหน้า72%
แท่งวิ่ง 0→72% · Reduce: เต็ม 72% ทันที
ดูโค้ด 
<div class="mk-progress" data-mk-progress="72">
  <i class="mk-progress__bar"></i>
</div>
data-mk-draw
เส้นวาดตัวเอง (stroke) · Reduce: โชว์เส้นเต็มทันที
ดูโค้ด 
<svg data-mk-draw data-mk-dur="1500">
  <path d="…" fill="none" stroke="…"/>
</svg>

3 · ปุ่ม · การ์ด · ลิงก์

เอามือชี้/กดเพื่อลอง · ตอน Reduce = ตัดการขยับ เก็บสี/เงา

.mk-btn
hover = ยกตัว, กด = ยุบ 0.97 · Reduce: เปลี่ยนสี/เงาแทน
ดูโค้ด 
<button class="mk-btn">กดฉัน</button>
.mk-card
ชี้ที่การ์ดนี้
ยกตัว + เงาลึกขึ้น
hover = ยก 4px + เงา · Reduce: เงาเปลี่ยนเฉยๆ
ดูโค้ด 
<div class="mk-card">…</div>
.mk-link / .mk-icon-btn
เส้นใต้ลากจากซ้าย · ไอคอนขยับ · Reduce: โชว์เส้นใต้/นิ่ง
ดูโค้ด 
<a class="mk-link">ลิงก์</a>
<button class="mk-icon-btn">อ่านต่อ <i>…</i></button>

4 · ข้อความ + reveal เพิ่ม

เผยทีละคำ + แบบหมุนเข้า · ตอน Reduce = โผล่เฉยๆ ไม่ขยับ

data-mk-text
Motion Kit เผย ทีละ คำ ไล่ กัน สวยงาม
แตกเป็นคำ stagger ขึ้น · a11y: เก็บ aria-label ครบ · Reduce: โผล่เฉยๆ
ดูโค้ด 
<p data-mk-text data-mk-step="70">ข้อความ…</p>
data-mk="rotate-in"
หมุน -5° + ย่อ + จาง · Reduce: จางอย่างเดียว
ดูโค้ด 
<div data-mk="rotate-in">…</div>

5 · Micro เพิ่มเติม

ripple · สวิตช์ · เอียง 3D · แสงตามเมาส์ · ตอน Reduce = ตัดการขยับ

.mk-ripple
คลื่นกระจายจากจุดคลิก (Material) · Reduce: ไม่มีคลื่น
ดูโค้ด 
<button class="mk-btn mk-ripple">กด</button>
.mk-switch
สวิตช์ thumb เลื่อน + เปลี่ยนสี · Reduce: สลับทันที
ดูโค้ด 
<label class="mk-switch"><input type="checkbox">
  <span class="mk-track"><span class="mk-thumb"></span></span>
</label>
data-mk-tilt
ขยับเมาส์บนตัวผม
เอียง 3D ตามเคอร์เซอร์
เอียงตามตำแหน่งเมาส์ · Reduce: นิ่ง ไม่เอียง
ดูโค้ด 
<div data-mk-tilt>…</div>
.mk-spotlight
ชี้ดูแสงตาม
เคอร์เซอร์ (glow follow)
แสง glow วิ่งตามเมาส์ · Reduce: ไม่ตามเมาส์
ดูโค้ด 
<div class="mk-spotlight">…</div>

6 · วงแหวน · ป้ายวิ่ง · แถบ scroll

วงแหวนความคืบหน้า + ป้ายวิ่งวน + แถบบอกตำแหน่ง scroll (บนสุดของหน้า)

data-mk-ring
0
วงแหวนวิ่ง + นับเลขกลาง · Reduce: เต็มทันที
ดูโค้ด 
<svg data-mk-ring="72" data-mk-ring-suffix="%">
  <circle class="mk-ring__track" r="52">
  <circle class="mk-ring__bar" r="52">
  <text class="mk-ring__num">0</text>
</svg>
.mk-marquee
Motiona11y-safevanilladrop-inGPU-safe
ป้ายวิ่งวนไร้รอยต่อ (hover = หยุด) · Reduce: หยุดนิ่ง
ดูโค้ด 
<div class="mk-marquee">
  <span class="mk-marquee__track">…items…</span>
</div>  <!-- JS ทำสำเนา 2 เท่าให้ลูปเนียน -->

แถบ scroll สีส้มบนสุดของหน้าเลื่อนตามที่บ๊องเลื่อน (.mk-scrollbar) — ลองเลื่อนหน้าดู

หยิบไปใช้ — 2 ไฟล์

เคารพ prefers-reduced-motion อัตโนมัติ (ตั้ง data-motion จาก matchMedia) + มี MotionKit.set('full'|'reduced'|'auto') ให้ทำปุ่ม toggle เองได้. engine = Motion (motion.dev) + fallback IntersectionObserver/WAAPI ถ้า CDN ล่ม.

<!-- ใน head: กัน flash -->
<link rel="stylesheet" href="motion-kit.css">
<script>document.documentElement.classList.add('mk-js');
  document.documentElement.setAttribute('data-motion',
    matchMedia('(prefers-reduced-motion: reduce)').matches?'reduced':'full');</script>

<!-- ก่อนปิด body -->
<script src="motion-kit.js"></script>
<script>MotionKit.init({ offset: 80 });</script>