CSS 3HTML 5Responsive Web Design

สร้าง Iron Man ด้วย SVG และการ scroll ผ่านเม้าส์

เรื่องที่เกี่ยวข้อง - Play with Scrollable, SVG

ทำไมคนถึงชอบ Iron Man?

อันนี้ถ้าเราชอบ Super Hero ก็คงตอบได้อย่างไม่ยากเย็นใช่ไหม

แต่ถ้า Iron Man มาอยู่บนเว็บไซต์ล่ะ? เราจะเล่นอะไรกับ Tony Stark ได้บ้าง?

อย่างที่คุณได้ทำความเข้าใจเรื่อง SVG ที่ผมเขียนไว้มาแล้ว ว่า SVG เป็น code ล้วนๆ ไม่ผสมสารกันบูด เอ้ย! ไม่ใช่ภาพบิตแมพ ที่ขยายแล้วแตกลาย เราจึงสามารถสร้างตัวภาพขึ้นมาเมื่อไหร่ ตอนไหนก็ได้

ทีนี้มีฝรั่งเขาอยากเอา Iron Man มาวาดผ่านการ scroll ขึ้นลงด้วย SVG นี่แหละครับ

ขั้นตอนง่ายๆ ก็คือ เราทำการเตรียมภาพ SVG เอาไว้ก่อนแล้วใช้ Javascript จับการ scroll ผ่านหน้าเว็บเพื่อวาดส่วนหัวของ Iron Man ขึ้นมาครับ

ลองเข้าไปดูภาพ Iron Man ที่วาดด้วย SVG กันเลย 

 

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save