Scalable Vector Graphics (SVG) เป็นรูปแบบภาพที่เขียนใน XML ด้วย SVG คุณสามารถเขียนโค้ดกราฟิกแบบขยายได้สองมิติ จากนั้นคุณสามารถนำไปใช้และแก้ไขใน CSS และ JavaScript
SVG อนุญาตกราฟิกสามประเภท: รูปร่างเวกเตอร์ (เส้นตรงและเส้นโค้งในทุกทิศทางและรูปร่าง) รูปภาพและข้อความ ด้วยความสามารถที่หลากหลายนักออกแบบเว็บไซต์จึงหันมาใช้ SVG เพื่อสร้างภาพเคลื่อนไหวที่ซับซ้อน ติดตั้งง่ายไม่เสียคุณภาพเมื่อปรับขนาดและไม่ต้องการแอปอื่น ๆ ให้ทำงาน
เนื่องจากอนิเมชั่นยังคงได้รับความนิยมเพิ่มขึ้นเรื่อย ๆ ส่วนใหญ่ไม่คุ้นเคยกับมัน บทความนี้จะเน้นภาพเคลื่อนไหว SVG ที่ยอดเยี่ยม 20 รายการซึ่งแสดงถึงศักยภาพของรูปแบบนี้
1. ไอคอนการแพทย์ SVG โดย kittons
ลิงค์ด่วน
- 1. ไอคอนการแพทย์ SVG โดย kittons
- 2. โฮเวอร์โดย SeanMcCaffery
- 3. ดึงลงเพื่อรีเฟรช (เครื่องบินกระดาษ) โดย Nikolay Talanov
- 4. เพียงแค่ไปต่อโดย Diaco M. Lotfollahi
- 5. เพิ่มตัวกรอง SVG ในวิดีโอ HTML5
- 6. ตัวต่อจิ๊กซอว์
- 7. Liner Gradient โดย Patrick Young
- 8. มาท่องเที่ยวโดย jjperezaguinaga
- 9. นาฬิกาโดย Mohamad Mohebifar
- 10. ไอคอนภาพเคลื่อนไหวโดย Luigi De Rosa
- 11. อุปกรณ์ทั้งหมดใน SVG โดย Chris Gannon
- 12. น้ำตกโดย Chris Gannon
- 13. เครื่องกำเนิดพืชโดย Blake Bowen
- 14. ไอคอนที่คลิกได้โดย Hamish Williams
- 15. เค้กใหม่โดย Marco Barría
- 16. เครื่องทำลายเอกสารโดย Chris Gannon
- 17. PolyLion ต่ำโดย GRAYGHOST
- 18. นาฬิกาทราย Loader โดยลีลา
- 19. วัวที่ตอบสนองโดย Sarah Drasner
- 20. นักศึกษาโดย Domany
- ตาคุณ
ภาพเคลื่อนไหวที่อบอุ่นและราบรื่นนี้เหมาะสำหรับเว็บไซต์ที่เกี่ยวข้องกับสุขภาพ ในขณะที่คุณโพสต์ข้อความในหัวข้อต่างๆภาพจะปรากฏขึ้นอย่างละเอียด รถพยาบาลหรืออะตอมจะสร้างดวงตาจะเปิดขึ้นและแพทย์จะกระโดดออกมา ภาพเคลื่อนไหวนี้แสดงให้เห็นถึงความสนุกและพลวัตของ SVG
ลิงค์
2. โฮเวอร์โดย SeanMcCaffery
ภาพเคลื่อนไหวสากลที่คุณสามารถนำไปใช้กับเว็บไซต์โต้ตอบใด ๆ รูปลักษณ์ที่ละเอียดอ่อนของเส้นขอบเมื่อคุณโฮเวอร์ทำให้คุณรู้สึกพึงพอใจและเชิญชวนให้คุณคลิกที่ลิงค์
ลิงค์
3. ดึงลงเพื่อรีเฟรช (เครื่องบินกระดาษ) โดย Nikolay Talanov
โดยปกติแล้วหน้าจะรีเฟรชเมื่อคุณ“ ดึงลง” บนหน้าเหล่านั้น แอนิเมชันนี้นำมาสู่ระดับใหม่ เมื่อคุณดึงลงเพื่อปล่อยคุณจะเปิดเครื่องบินกระดาษขึ้นสู่ท้องฟ้า หากคุณต้องการให้ผู้เยี่ยมชมรีเฟรชแอปของคุณบ่อยครั้งคุณควรพิจารณาเพิ่มภาพเคลื่อนไหวแบบนี้
4. เพียงแค่ไปต่อโดย 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. PolyLion ต่ำโดย GRAYGHOST
นี่เป็นภาพประกอบและอนิเมชั่นที่เหลือเชื่อที่แสดงให้เห็นหัวของสิงโตที่ปรากฏขึ้นและหายไปในรูปแบบของรูปหลายเหลี่ยมแบบเคลื่อนไหว
ลิงค์
18. นาฬิกาทราย Loader โดยลีลา
อีกภาพเคลื่อนไหวที่มีประสิทธิภาพที่ใช้เฉพาะ SVG ทุกๆ 5 วินาทีนาฬิกาทรายจะกลับหัวและเริ่มรอบใหม่
ลิงค์
19. วัวที่ตอบสนองโดย Sarah Drasner
นี่เป็นแอนิเมชั่นแบบอินเตอร์แอคทีฟตลก ๆ ที่อนุญาตให้คุณคลิกบนวัวและลากไปรอบ ๆ ดวงจันทร์ในขณะที่นักบินอวกาศงงงันดูอยู่
20. นักศึกษาโดย Domany
นักเรียนกระตือรือร้นปรากฏขึ้นพร้อมที่จะเรียนรู้! มันเป็นแอนิเมชั่นที่ยอดเยี่ยมที่หน้าหนังสือพลิกผัน ไม่มีการกระพริบจากนักเรียน แต่นี่เป็นภาพเคลื่อนไหวที่เป็นระเบียบเรียบร้อยสมบูรณ์แบบเพื่อสรุปรายการนี้
ลิงค์
ตาคุณ
ภาพเคลื่อนไหว SVG ที่คุณชื่นชอบไม่รวมอยู่ในรายการนี้คืออะไร? แบ่งปันสิ่งที่คุณเลือกในความคิดเห็นด้านล่าง!
