30 ภาพเคลื่อนไหว SVG ที่ยอดเยี่ยมสำหรับแรงบันดาลใจของคุณ

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

ทำงานกับ SVG เราสนุกกับเบราว์เซอร์ที่ดีสำหรับภาพเคลื่อนไหว SVG และเรามีวิธีเพิ่มเติมในการสร้างภาพเคลื่อนไหวใหม่ คุณสามารถใช้ทั้งฟังก์ชั่นภาพเคลื่อนไหว SVG ในตัวหรือภาพเคลื่อนไหว CSS3 ได้ (โปรดทราบว่า CSS ไม่ใช่ทุกสิ่งที่ทำได้โดย CSS ดังนั้นจึงยังคงจำเป็นต้องใช้ JavaScript) อีกวิธีคือใช้เครื่องมือ JavaScript เช่น GSAP หรือ Snap JS เป็นแนวปฏิบัติที่ดีสำหรับการสร้างภาพเคลื่อนไหว.

ที่นี่ฉันได้รวบรวมภาพเคลื่อนไหว SVG ที่น่าทึ่ง บางคนใช้ภาพเคลื่อนไหว SVG และอื่น ๆ ใช้การแปลง CSS สำหรับภาพเคลื่อนไหวพื้นฐานและที่เหลือใช้ความช่วยเหลือของ JavaScript.

Border Animation โดย Sean McCaffery

สร้างด้วย CSS เท่านั้นรูปแบบขอบจะล้อมรอบข้อความได้อย่างราบรื่นเมื่อคุณวางเมาส์เหนือส่วน “ฉวัดเฉวียน” คำแนะนำ.

Elastic SVG Sidebar โดย Nikolay Talanov

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

ดึงลงเพื่อรีเฟรชโดย Nikolay Talanov

หน้าส่วนใหญ่อนุญาตให้คุณ “ดึงลงมา” บนหน้าเพื่อรีเฟรช ด้วยภาพเคลื่อนไหวนี้เมื่อคุณ “ปล่อย” หน้าไอคอนส่งเปลี่ยนเป็นไอคอนเครื่องบินและปล่อยสู่อากาศ.

ไล่ระดับสีเคลื่อนไหวในข้อความโดย Patrick Young

นี่เป็นข้อความที่ละเอียดอ่อน แต่ไม่ง่ายที่จะพลาดการไล่ระดับสีของข้อความที่ผู้ชื่นชอบการพิมพ์จะหลงรัก.

นิเมชั่นหัวใจโดย Nikolay Talanov

ภาพเคลื่อนไหวนี้แสดงให้คุณเห็นว่าไอคอนรูปหัวใจทำจากวงกลมสองวงและสี่เหลี่ยมได้อย่างไร การแปลงเสร็จสิ้นด้วยภาพเคลื่อนไหว CSS.

มาท่องเที่ยวกันเถอะโดย jjperezaguinaga

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

เมนูสลับภาพเคลื่อนไหวโดย Tamino Martinius

แอนนิเมชั่น morphing ของไอคอนแฮมเบอร์เกอร์กลายเป็นไอคอนกากบาท ดูว่าการเปลี่ยนแปลงนั้นราบรื่นระหว่างวัตถุทั้งสองอย่างไร.

Animated Infographic โดย Sdras

แอนิเมชั่นที่ยอดเยี่ยมโดย Sarah Drasner ขับเคลื่อนโดยไทม์ไลน์ของ GSAP มันคืออินโฟกราฟิกเข้ามามีชีวิตสร้างด้วยแอนิเมชั่น ใช้แถบเลื่อนเพื่อเข้าถึงเฟรมจากจุดใดก็ได้.

Rain-Bros ไม่ชอบ JS โดย cihadturhan

แอนิเมชันลูปที่ไม่เหมือนใครและตลกแสดงภาพการเดินของตัวละคร การเคลื่อนไหวของวัตถุในการสาธิตนี้เป็นการผสมผสานระหว่าง SVG และ CSS3 แอนิเมชัน ขาใช้ภาพเคลื่อนไหว SVG ในขณะที่ส่วนอื่น ๆ ใช้ภาพเคลื่อนไหว CSS3.

นาฬิกาโดย Mohamad Mohebifar

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

Rainbow Rocket Man โดย Chris Gannon

มนุษย์อวกาศยิงเข้าสู่อวกาศด้วยชุดเจ็ทแพ็คพลังรุ้ง (?) มีแอนิเมชั่นที่ดีโดยใช้ปลั๊กอิน GSAP Tweenmax.

ไอคอนภาพเคลื่อนไหวโดย Luigi De Rosa

อย่างไรก็ตามเหนือไอคอน SVG แบบเคลื่อนไหวเหล่านี้เพื่อตรวจสอบสิ่งที่พวกเขาสามารถทำได้ ผู้สร้างสร้างสิ่งนี้โดยใช้ GSAP.

พื้นที่ทำงานแฟลตโดยHoàngNhật

ภาพเคลื่อนไหวแสดงให้เห็นถึงพื้นที่ทำงานในการออกแบบสไตล์แบน ผู้สร้างใช้ GSAP เพื่อสร้างภาพเคลื่อนไหวที่ยอดเยี่ยมของเวิร์กสเตชัน.

ไอคอนภาพเคลื่อนไหวที่คลิกได้โดย Hamish Williams

นี่เป็นแอนิเมชั่นเด็ดที่ใช้ประโยชน์จากไลบรารี snap.svg คลิกเพื่อดูจดหมาย “ส่ง”.

การดำน้ำโดย Chris Gannon

คุณเคยข้ามก้อนหินบนพื้นผิวของทะเลสาบหรือไม่? นี่เป็นภาพเคลื่อนไหว SVG พา ธ แบบง่าย ๆ ที่แสดงให้เห็น แต่ไม่มีหินและไม่มีทะเลสาบ.

การเคลื่อนไหวสำหรับเว็บโดย LegoMushroom

มันมีอนิเมชั่นทำนองดีประตูเด็ดสุด ๆ สำหรับข้อความอะไรที่ไม่ชอบ สิ่งนี้สร้างด้วย mo.js ซึ่งเป็นไลบรารี JavaScript กราฟิกเคลื่อนไหว.

ฟอนต์การเขียนแบบเคลื่อนไหวโดย Lee Porter

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

เมนู Gooey โดย Lucas Bebber

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

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

วิธีทำเค้กวันเกิดแบบเลเยอร์ที่สร้างด้วยภาพเคลื่อนไหว SVG และ CSS.

ขอบคุณโดย Rachel Smith

เพียงดูภาพเคลื่อนไหวที่ยอดเยี่ยมของโน้ตขอบคุณที่เรียบง่าย มันถูกสร้างขึ้นโดยใช้ไลบรารี SVG และ GSAP TweenMax.

CSS vs SVG โดย Mario Sanchez Maselli

ตอนนี้เรามาดูการเปรียบเทียบเกี่ยวกับภาพเคลื่อนไหว CSS และ SVG คุณเห็นความแตกต่างหรือไม่?

Walking Dog โดย Mark Nelson

อีกวิธีหนึ่งในการทำให้ SVG เคลื่อนไหวคือการใช้ภาพสไปรต์เหมือนกับที่ผู้สร้างคนนี้ทำ.

โหลดนาฬิกาทรายโดยลีลา

งานสร้างสรรค์ที่สร้างขึ้นโดยใช้ภาพเคลื่อนไหว SVG ล้วน (SMIL); ไม่มี CSS หรือ JS เพื่อเคลื่อนไหวสิ่งที่นี่.

ภาพเคลื่อนไหวโลโก้โดย Adem ilter

นี่คือบทนำโลโก้เคลื่อนไหวที่ดีโดยใช้ภาพเคลื่อนไหว SVG แบบอินไลน์ ไม่มีการใช้ CSS หรือ JS เพื่อทำให้ทุกอย่างทำงานได้.

แอนิเมชั่นสถิติโดย Jonas Badalic

กราฟสถิติที่สวยงามพร้อมภาพเคลื่อนไหว SVG ที่ขับเคลื่อนโดยห้องสมุด Snap.SVG.

Ouroboros โดย Noel Delgado

เส้นทางภาพเคลื่อนไหว SVG ที่น่าทึ่ง ขั้นแรกให้ผู้สร้างวาดเส้นทางเส้นทางบน SVG ก่อนใช้ tween.js เพื่อเพิ่มภาพเคลื่อนไหว.

Creative Gooey Effects โดย Lucas Bebber

ต่อไปนี้เป็นความคิดสร้างสรรค์เจ็ดประการของการใช้ตัวกรอง SVG เพื่อสร้างเอฟเฟ็กต์แบบเหนอะหนะ Visualizer ดนตรีเป็นที่ชื่นชอบภาพเคลื่อนไหวดูดีมาก.

โยนวัวโดย Sarah Drasner

อันนี้เป็นอนิเมชั่น SVG ที่ขับเคลื่อนโดย TweenMax แต่สร้างขึ้นเพื่อความสนุกสนาน กดค้างไว้และลากวัวไปรอบ ๆ โลก มันจะหมุนใน "วงโคจร".

โลโก้ภาพเคลื่อนไหวโดย Ali

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