เทคนิคที่เปลี่ยนทุก Scroll เป็นภาพเคลื่อนไหวที่มีชีวิต
ผู้ใช้คือผู้กำกับจังหวะของเรื่องราวด้วยตัวเอง
ใช้ AI เป็นผู้ช่วยเขียน Logic
คุณแค่บอกจังหวะ — Claude Code จัดการให้
ไม่ต้องเป็น Developer ระดับ Senior
แค่รู้จักวิธีสั่ง AI ให้ถูกต้อง
Image Sequence ที่โหลดล่วงหน้าทั้งหมด
ความลื่นไหลของ Canvas Animation
พื้นที่ Scroll ของ Scrollytelling Section
คำว่า Scrollytelling มาจาก Scroll + Storytelling — เทคนิคการออกแบบที่เนื้อหา แอนิเมชัน และการเปลี่ยนฉาก ถูกขับเคลื่อนด้วยการเลื่อนหน้าจอของผู้ใช้งาน ทำให้รู้สึกเหมือนเป็นคนควบคุมจังหวะการเล่าเรื่องด้วยตัวเอง
เหมาะกับ
Claude Code เข้าใจโครงสร้างโฟลเดอร์และ Logic โค้ดซับซ้อนได้อย่างยอดเยี่ยม จัดการ Boilerplate ให้อัตโนมัติ
บอก AI ว่าต้องการจังหวะไหน หน้าตาเป็นอย่างไร แล้วให้ Claude Code จัดการ Logic การคำนวณเฟรม Memory และการซิงค์ Scroll
แค่รู้จักวิธีสั่งงาน AI ให้ถูกต้อง ด้วย Prompt ที่ดี คุณสร้างเว็บระดับ Apple ได้ในวันเดียว
เทคนิคนี้ไม่ได้เหมาะกับทุกเว็บไซต์ แต่จะ ทรงพลังมาก เมื่อใช้กับโปรเจกต์ประเภทนี้
หน้า Landing Page เปิดตัวสินค้านวัตกรรม เช่น สมาร์ทโฟน รถยนต์ EV หรือเครื่องใช้ไฟฟ้าไฮเอนด์ ที่ต้องการโชว์รายละเอียดผ่านภาพเคลื่อนไหว
เว็บไซต์แคมเปญพิเศษ รายงานประจำปี หรืองานนำเสนอข่าวเชิงลึก สไตล์ที่ New York Times และ The Guardian ใช้บอกเล่าเรื่องราวซับซ้อน
หน้าอธิบายฟีเจอร์ซอฟต์แวร์ที่ต้องการโชว์ความล้ำสมัย ดึงดูดนักลงทุนและผู้ใช้งานด้วย Visual ระดับ Enterprise
เว็บไซต์เอเจนซี่ หรือนักออกแบบที่ต้องการโชว์ของ สร้างความประทับใจแรกที่ทำให้ลูกค้าจำได้ไม่รู้ลืม
ตัวอย่างการนำ Scrollytelling ไปใช้งานจริงกับ Product Launch Page ที่โหลดเร็ว ลื่นไหล และสร้างความประทับใจตั้งแต่วินาทีแรก
ขึ้นโครงสร้างหน้าเว็บและจัดการ Layout รวมถึงการตรึงหน้าจอด้วย position: sticky ซึ่งเป็นหัวใจสำคัญของ Scrollytelling
เขียน Logic ควบคุมการทำงานทั้งหมด ตั้งแต่การโหลดภาพ การคำนวณเฟรม ไปจนถึงการวาดภาพลง Canvas แบบ Real-time
GreenSock Animation Platform — ไลบรารี Animation ระดับโลกที่ใช้ใน Production ของเว็บไซต์ชั้นนำ มีประสิทธิภาพสูงและ API เรียบง่าย
Plugin ของ GSAP สำหรับจับการเลื่อนเมาส์แล้วผูกเข้ากับ Animation ใดก็ได้ รองรับ scrub, pin, และ snap ในตัว
พื้นที่วาดรูปแบบ Bitmap ด้วย JavaScript โดยตรง ทำให้แสดงผลภาพ Sequence ได้ลื่นไหลโดยไม่ต้องพึ่ง DOM หรือ CSS Animation
AI Agent ที่ทำงานบน Command Line เข้าใจโครงสร้างโฟลเดอร์และ Logic ซับซ้อน ช่วยให้คุณเขียนโค้ดทั้งหมดด้านบนได้ในไม่กี่ชั่วโมง
หัวใจสำคัญของเทคนิคนี้คือ Image Sequence — ภาพนิ่งที่เรนเดอร์ออกมาจากวิดีโอหรือโปรแกรม 3D จำนวนหลายร้อยเฟรม
frame_0001.webp ถึง frame_0150.webp
assets/sequence/
มีวิดีโออยู่แล้ว? สั่ง Claude Code แตกเฟรมให้เลย
ช่วยเขียน python script โดยใช้ ffmpeg
เพื่อดึงเฟรมจากวิดีโอชื่อ video.mp4
ออกมาเป็นรูปภาพนามสกุล .webp ที่ 30 fps
ตั้งชื่อไฟล์เรียงลำดับ เช่น frame_0001.webp
และเก็บไว้ในโฟลเดอร์ assets/sequence/
และรันสคริปต์ให้ด้วยสร้าง Section ความสูง 400vh พร้อม Sticky Container และ Canvas พื้นหลังดำสไตล์พรีเมียม
สร้างโปรเจกต์เว็บไซต์ประกอบด้วยไฟล์ index.html, style.css และ app.js
ในไฟล์ HTML ให้ดึง CDN ของ GSAP และ ScrollTrigger เข้ามา
สร้างโครงสร้างหน้าเว็บดังนี้:
- สร้าง <section id="scroll-sequence"> ให้มีความสูง 400vh
- ข้างใน ให้สร้าง div.sticky-container ที่มี CSS
position: sticky, top: 0, ความสูง 100vh และ overflow: hidden
- ภายใน .sticky-container ให้ใส่ <canvas id="hero-canvas">
ให้ canvas อยู่ตรงกลางจอ กว้าง 100% สูง 100vh
กำหนดพื้นหลังเป็นสีดำเพื่อให้แอนิเมชันดูโดดเด่นสไตล์พรีเมียมโหลดภาพทั้ง 150 เฟรมล่วงหน้าด้วย Promise.all และวาดลง Canvas พร้อมคำนวณ Aspect Ratio อัตโนมัติ
ไปที่ไฟล์ app.js — ฉันมี Image Sequence ในโฟลเดอร์ assets/sequence/
ชื่อ frame_0001.webp ถึง frame_0150.webp
ช่วยเขียน JavaScript เพื่อทำสิ่งต่อไปนี้:
1. กำหนดขนาด Canvas ให้เป็น 1920x1080
2. เขียนฟังก์ชัน Preload รูปภาพทั้งหมดด้วย Promise.all
3. เมื่อภาพโหลดเสร็จ ให้ drawImage วาดเฟรมแรก (index 0)
4. สร้างฟังก์ชัน render(frameIndex)
*สำคัญ: คำนวณ Aspect Ratio ให้ภาพเต็ม Canvas โดยไม่บิดเบี้ยวผูก Scroll กับ Frame Index ด้วย scrub: 0.5 ภาพขยับตามนิ้วมือแบบลื่นไหล 100%
ยังอยู่ใน app.js ช่วยเขียนโค้ด GSAP ScrollTrigger:
1. สร้าง Object → const seq = { frame: 0 };
2. ใช้ gsap.to() อนิเมต seq.frame จาก 0 → 149
3. ผูกกับ ScrollTrigger โดยใช้ #scroll-sequence เป็น trigger
4. กำหนด start: "top top" และ end: "bottom bottom"
5. ตั้งค่า scrub: 0.5 เพื่อความสมูท
6. ปัดค่าเฟรมให้เป็นจำนวนเต็มเสมอ
7. ใน onUpdate ให้เรียก render(seq.frame)เพิ่มข้อความ 3 กลุ่มที่เฟดอิน/เอาท์ตามจังหวะภาพ ด้วย GSAP Timeline เดียวกัน
กลับไปที่ index.html เพิ่ม Text Elements 3 กลุ่มใน .sticky-container
ให้อยู่ทับบน Canvas (position: absolute และ z-index สูงๆ)
จากนั้นใน app.js สร้าง GSAP Timeline ผูกกับ ScrollTrigger เดิม:
- กลุ่มที่ 1 → เฟดอิน 10%-30% แล้วเฟดเอาท์
- กลุ่มที่ 2 → เฟดอิน 40%-60% แล้วเฟดเอาท์
- กลุ่มที่ 3 → เฟดอิน 70%-90%
จัดจังหวะให้สัมพันธ์กับ Image Sequence ที่กำลังเล่นรองรับทุกหน้าจอด้วย Resize Event และ Mobile Fallback ที่ประหยัดแบตและเน็ต
เพิ่มโค้ดใน app.js เพื่อทำให้โปรเจกต์สมบูรณ์:
1. Resize Event → เมื่อ resize ให้คำนวณ Canvas ใหม่
และ render() ภาพปัจจุบันทันที
2. Mobile Fallback → ถ้าหน้าจอกว้างน้อยกว่า 768px
ให้โหลดแค่ภาพนิ่งภาพเดียว ไม่ต้องโหลด 150 รูป
และไม่ต้องเรียก GSAP ScrollTrigger ของ Canvas เลยอย่าวาง Image Sequence ไว้บนสุดของเว็บ ให้ใส่ไว้ส่วนล่างเพื่อให้เบราว์เซอร์มีเวลาดาวน์โหลดก่อนผู้ใช้เลื่อนถึง
ปล่อยให้ Scroll เป็นธรรมชาติ GSAP แค่รอรับค่าแล้วเปลี่ยนภาพ ห้ามเขียนโค้ดไปฝืน Scroll ของเมาส์เด็ดขาด
บีบอัดภาพให้เล็กสุด ถ้า 150 รูปหนักเกิน 15–20 MB จะกระทบ Speed Score และเปลือง Data มือถืออย่างมาก
พร้อมแล้วหรือยัง?
ด้วย Claude Code + GSAP + HTML Canvas
คุณสร้างได้ในไม่กี่ชั่วโมง