สร้าง Scroll Image Animation ให้กับเว็บไซต์เราอย่างง่ายๆ

หลายๆ คนคงเคยเห็นเว็บไซต์หลายๆ ตัวที่เวลาเรา Scroll แล้วรูปภาพก็ค่อยๆ เคลื่อนไหวตามการ scroll ของเรา ยกตัวอย่างเช่น

Apple Airpods Pro

Animation ที่เราใช้นี้ถูกออกแบบด้วยหลักการ Motions Graphics In Web Design ซึ่งคือ การออกแบบเว็บไซต์โดยให้ UI มีการเคลื่อนไหว ไม่ว่าจะเป็น ข้อความ รูปภาพ วีดีโอ เพื่อดึงดูดความสนใจ และช่วยให้ผู้ใช้งานมีความรู้สึกร่วมไปกับเว็บไซต์

เริ่มกันเลย

บทความนี้จะใช้ vanilla javascript เพื่อให้เข้าใจง่ายกับทุกคน

1. สร้าง Tags Canvasใน HTML

<canvas id="main" />

2. ตกแต่ง Canvas ของเราให้อยู่ตรงกลาง

html {
  background: #000;
  height: 4000px;
}
canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3. สร้างฟังก์ชันที่จะ ดึงค่าจาก Dom ของ Canvas

const canvas = document.getElementById("main");
const context = canvas.getContext("2d");
canvas.width = 770;
canvas.height = 770;

4. สร้างตัวแปร Arrays ที่เก็บ HTML Image Element ทั้งหมด โดยให้แต่ละ element store รูปภาพแต่ละรูปของเรา

ปล. โค้ดของเราใช้ เซตภาพจากเว็บไซต์ Apple เป็นเคสประกอบการศึกษานะค้าบ

แต่ถ้าหากเราต้องการใช้รูปภาพของเราเอง สามารถทำได้ง่ายๆ โดยการที่เรา ตั้งชื่อไฟล์ให้เป็นตัวเลขตามลำดับ ยกตัวอย่างเช่น ถ้ามีทั้งหมด 100 รูป เราอาจตั้งชื่อ ไฟล์ เป็น 0001.jpg-0100.jpg

const frames = 80; // มีทั้งหมด 80 รูป
const currentFrame = index => (
  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/10-fall-into-case/${(index + 100).toString().padStart(4, '0')}.jpg`
);
const images = []
for (let i = 0; i < frame; i++) {
  const img = new Image();
  img.src = currentFrame(i);
  images.push(img);
}

5. import ไรบลารี่ gsap มาใช้โดยทุกครั้งที่มีการ Scroll ตัว Gsap จะ Tricker แล้วสั่งทำฟังก์ชันที่เรากำหนดให้ พร้อมกับเพิ่มค่าในตัวแปรของเรา (target.frame) จนกระทั่งสิ้นสุดที่ length ของภาพทั้งหมด

const target = {
  frame: 0
};
gsap.to(target, {
  frame: frame - 1, // กำหนดให้ lenght เริ่มจาก 0 - 79
  snap: "frame",
  scrollTrigger: {
    scrub: 0.5
  },
  onUpdate: render
});

6. สร้างฟังก์ชัน Render โดยทุกๆครั้งที่ มีการ Scroll ฟังก์ชันนี้จะลบ ภาพเดิมออกไป ก่อน จากนั้นทำการ “วาด” ภาพใหม่เข้าไป ตามลำดับ(ที่ได้จากการ tricker ของ gsap)

images[0].onload = render; // โหลดภาพแรกเข้าสู่ canvas
function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[target.frame], 0, 0); 
}

เสร็จแล้วว ลองรันกันเลย ถ้าใครอยากลองดู Demo กดที่ลิงค์ Codepen นี้เลย
https://codepen.io/pisanu-promma/pen/JjrzdwX

ตัวอย่างผลลัพธ์ที่ได้

เป็นอย่างไรกันบ้าง ไม่ยากเลยใช่มั้ย นอกจากนี้เพื่อนๆ ยังสามารถเอาไปประยุกต์ใช้กับ Framwork ที่ใช้กันอยู่ได้ หรือ ประยุกต์ใช้ฟังก์ชันการ Scroll กับการ Animation อื่นๆ เพื่อให้เว็บไซต์ของเราดูน่าสนใจมากขึ้น