20 ตัวอย่างแอนิเมชั่น SVG ที่ยอดเยี่ยม

Scalable Vector Graphics (SVG) เป็นรูปแบบภาพที่เขียนด้วย XML ด้วย SVG คุณสามารถเขียนโค้ดกราฟิกที่ปรับขนาดได้สองมิติ จากนั้น คุณสามารถปรับใช้และแก้ไขได้ใน CSS และ JavaScript

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

เนื่องจากแอนิเมชั่นยังคงได้รับความนิยมเพิ่มขึ้น ส่วนใหญ่จึงไม่คุ้นเคยกับแอนิเมชั่น บทความนี้จะเน้นย้ำ 20 แอนิเมชั่น SVG ที่แสดงให้เห็นถึงศักยภาพของรูปแบบนี้

1. ไอคอน SVG ทางการแพทย์โดย kittons

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

ลิงค์

2. โฮเวอร์โดย SeanMcCaffery

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

ลิงค์

3. ดึงลงเพื่อรีเฟรช (เครื่องบินกระดาษ) โดย Nikolay Talanov

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

4. Just Keep Going โดย Diaco M. Lotfollahi

แอนิเมชั่น SVG ที่แสดงศักยภาพของ Scaling Vector การเคลื่อนไหวที่แม่นยำอย่างราบรื่นของร่างกายมนุษย์กำลังสะกดจิต

ลิงค์

5. เพิ่มตัวกรอง SVG ในวิดีโอ HTML5

Paul Irish จากทีม Google Chrome มองว่า SVG สามารถแก้ไขเนื้อหานอกกราฟิกแบบเวกเตอร์ได้อย่างไร เขารวม CSS และ SVG เพื่อสร้างฟิลเตอร์ภาพที่น่าทึ่งเพื่อแสดงให้เห็นว่าแอนิเมชั่น SVG สามารถเป็นส่วนเสริมที่ดีให้กับวิดีโอสำเร็จรูป

ลิงค์

6. จิ๊กซอว์

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

ลิงค์

7. Liner Gradient โดย Patrick Young

หากคุณชื่นชอบแสงนีออนและฟอนต์ที่สวยงาม คุณจะต้องชอบแอนิเมชั่นนี้ งานนี้แสดงให้เห็นว่าคุณไม่จำเป็นต้องมีเส้นเคลื่อนไหวใดๆ สำหรับแอนิเมชั่นที่ยอดเยี่ยม เพียงแค่ฟอนต์ที่ยอดเยี่ยมและรหัสสีที่เหมาะสมพร้อมเอฟเฟกต์การไล่ระดับสี

ลิงค์

8. เที่ยวกันเถอะ โดย jjperezaguinaga

เครื่องบินสองลำและบอลลูนอากาศร้อนหมุนรอบสถานที่สำคัญยอดนิยมของโลก แอนิเมชั่นนี้มีสีสัน มองโลกในแง่ดี และเหลือเชื่อ มันแสดงให้เห็นทุกสิ่งที่คุณสามารถทำได้หากคุณเชี่ยวชาญใน SVG

ลิงค์

9. นาฬิกาโดย Mohamad Mohebifar

แอนิเมชั่น SVG อย่างง่ายของนาฬิกาเคลื่อนที่ที่แสดงเวลาปัจจุบัน การเคลื่อนไหวของตัวชี้และการออกแบบที่เรียบง่ายสร้างความมหัศจรรย์ให้กับแอนิเมชั่นนี้

ลิงค์

10. ไอคอนเคลื่อนไหวโดย Luigi De Rosa

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

11. อุปกรณ์ทั้งหมดใน SVG โดย Chris Gannon

แอนิเมชั่นแบบถ่ายครั้งเดียวที่ครอบคลุมอุปกรณ์อัจฉริยะทั้งหมดที่เราใช้อย่างสร้างสรรค์ที่สุด เดสก์ท็อปจะเปลี่ยนเป็นแล็ปท็อป แล็ปท็อปเป็นแท็บเล็ต จากนั้นเป็นสมาร์ทโฟน

ลิงค์

12. น้ำตก โดย Chris Gannon

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

ลิงค์

13. เครื่องกำเนิดพืชโดย Blake Bowen

ตอนนี้อันนี้เป็นอย่างอื่น เมื่อคุณคลิกที่ปุ่ม 'สร้าง' คุณจะเห็นพืชเพิ่มขึ้นและเติบโต แต่ทุกครั้งที่คุณคลิก รูปแบบต่างๆ จะเกิดขึ้น

ลิงค์

14. ไอคอนที่คลิกได้ โดย Hamish Williams

SVG เชิงโต้ตอบอื่นที่เรียกใช้ภาพเคลื่อนไหวเมื่อคุณคลิก อันนี้จะเริ่มแอนิเมชั่น "ส่ง" เมื่อคุณคลิก

ลิงค์

15. เค้กใหม่โดย Marco Barría

แอนิเมชั่นที่น่าสนใจที่แสดงการทำเค้กทีละชั้น เป็นแอนิเมชั่น SVG ที่น่าประทับใจซึ่งเหมาะสำหรับการ์ดวันเกิด

16. เครื่องทำลายเอกสารโดย Chris Gannon

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

ลิงค์

17. Low PolyLion โดย GRAYGHOST

นี่เป็นภาพประกอบและแอนิเมชั่นที่น่าเหลือเชื่อที่แสดงให้เห็นหัวสิงโตที่ปรากฏขึ้นและหายไปในรูปแบบของรูปหลายเหลี่ยมที่เคลื่อนไหวได้

ลิงค์

18. Hourglass Loader โดย Leela

แอนิเมชั่นที่มีประสิทธิภาพอีกอย่างที่ใช้ SVG เท่านั้น ทุกๆ 5 วินาที นาฬิกาทรายจะพลิกกลับด้านและเริ่มรอบใหม่

ลิงค์

19. วัวตอบสนองโดย Sarah Drasner

นี่เป็นแอนิเมชั่นตลกแบบโต้ตอบที่ให้คุณคลิกที่วัวแล้วลากไปรอบๆ ดวงจันทร์ในขณะที่นักบินอวกาศงงงันมองดูมัน

20. นักเรียนโดย Domany

นักเรียนกระตือรือร้นปรากฏพร้อมที่จะเรียนรู้! เป็นแอนิเมชั่นที่ยอดเยี่ยมที่หน้าหนังสือเปลี่ยนไปอย่างเรียบร้อย ไม่มีการกระพริบตาจากนักเรียน แต่นี่เป็นแอนิเมชั่นที่เป็นระเบียบเรียบร้อยเพื่อสรุปรายการนี้

ลิงค์

ตาคุณ

แอนิเมชั่น SVG ที่คุณชื่นชอบไม่รวมอยู่ในรายการนี้คืออะไร แบ่งปันสิ่งที่คุณเลือกในความคิดเห็นด้านล่าง!