20+ แพ็ค SVG เคลื่อนไหวสุดเจ๋ง
เผยแพร่แล้ว: 2015-11-16SVG (หรือ Scalable Vector Graphics) เป็นรูปแบบไฟล์ XML ซึ่งประกอบด้วยเวกเตอร์สองมิติและช่วยให้นักพัฒนาสามารถสร้างกราฟิกและแอปพลิเคชันกราฟิกที่น่าทึ่งซึ่งเป็นไดนามิกและเคลื่อนไหวได้
SVG เป็นรูปแบบรูปภาพที่ทรงพลังที่สามารถจัดการกับโค้ด ทั้งในโปรแกรมแก้ไขข้อความหรือด้วย CSS / JS และมีการใช้มากขึ้นเรื่อยๆ ในการออกแบบเว็บ
หนึ่งในข้อดีที่ใหญ่ที่สุดของ SVG คือสามารถดูคมชัดได้ในทุกความละเอียดหน้าจอ มันสามารถมีขนาดไฟล์ที่เล็กมากและสามารถแก้ไขและแก้ไขได้อย่างง่ายดาย ภาพ SVG ให้อิสระมากขึ้นเมื่อพิจารณาถึงขนาดของภาพที่ใช้ ตลอดจนวิธีที่พวกมันโต้ตอบกับการออกแบบขั้นสุดท้ายของคุณ
รูปแบบภาพเวกเตอร์แบบ XML นี้ช่วยให้นักพัฒนาเว็บและนักออกแบบเว็บไซต์ทำสิ่งต่างๆ ได้ง่ายขึ้น ดังนั้นเราจึงตัดสินใจรวบรวม แพ็ค SVG แบบเคลื่อนไหว เจ๋งๆ จำนวน 22 ชุดไว้ที่นี่เพื่อสร้างแรงบันดาลใจให้กับคุณ แพ็ก SVG ระดับพรีเมียมเหล่านี้มีจุดประสงค์ที่แตกต่างกัน ตั้งแต่การเพิ่มไอคอนและข้อความแอนิเมชั่นไปยังเว็บไซต์ ไปจนถึงการเพิ่มนาฬิกา กราฟิกแอนิเมชั่น และอื่นๆ
เพิ่มชุด SVG แบบเคลื่อนไหวเหล่านี้ลงในคอลเล็กชันการออกแบบเว็บของคุณและเตรียมพร้อมสำหรับโครงการเว็บไซต์ครั้งต่อไปของคุณ!
ป.ล. เราได้เพิ่มตัวอย่าง วิธีการใช้ SVG ในการออกแบบเว็บ ด้านล่าง
SVG POP Watch – SVG Watch Engine ที่ตอบสนองฉับไว
SVG POP Watch นั้นสมบูรณ์แบบสำหรับโครงการหรือทีมเว็บไซต์ของคุณ คุณสามารถเปลี่ยนรูปลักษณ์ได้อย่างง่ายดาย มีกลไกนาฬิกา SVG แบบเคลื่อนไหวพร้อมเรตินาและตอบสนอง คุณสามารถเพิ่มการออกแบบของคุณเองได้อย่างง่ายดาย นาฬิกา SVG นี้มาพร้อมกับคุณสมบัติที่ยอดเยี่ยมมากมาย ดังนั้นอย่าลืมลองดู!
ชุดภาพประกอบ SVG แบบเคลื่อนไหว
นี่เป็นชุดภาพประกอบ SVG ที่ดีและมีชีวิตชีวาจริงๆ พวกเขาสร้างขึ้นโดยใช้ไลบรารี Snap.SVG JavaScript และจะดูดีในโครงการของคุณ
รูปแบบข้อความ 3 มิติแบบเคลื่อนไหว – SVG
ชุดนี้ประกอบด้วยข้อความแอนิเมชั่น 3 มิติ 10 แบบที่ไม่เหมือนใคร พวกเขาใช้ข้อความ HTML ซึ่งหมายความว่า Google อ่านเหมือนกับข้อความ HTML อื่นๆ สไตล์ในชุดนี้มีตั้งแต่แบบสมจริง แบนราบ และมีมิติเท่ากัน
ไอคอนสภาพอากาศ SVG เคลื่อนไหว
ไอคอนสภาพอากาศแบนเคลื่อนไหวเหล่านี้ได้รับการออกแบบอย่างสวยงาม แต่ละแอนิเมชั่นมีแอนิเมชั่นเฉพาะของตัวเอง และเมื่อใช้พวกมัน คุณจะทำให้โปรเจกต์ออกแบบเว็บของคุณสร้างสรรค์และน่าสนใจยิ่งขึ้นอย่างแน่นอน
ไอคอน SEO SVG 6 แพ็ค
ชุดนี้ประกอบด้วยไอคอนเคลื่อนไหว SEO SVG 6 ไอคอน คุณสามารถใช้และรวมเข้ากับโครงการออกแบบเว็บของคุณเพื่อทำให้เว็บไซต์ของคุณโต้ตอบได้
StarshineJS – เอฟเฟกต์ HTML ของดาวประกายระยิบระยับ SVG
ด้วยเอฟเฟกต์ HTML แบบเคลื่อนไหว คุณสามารถเพิ่มแสงจ้า เซ็กซี่ หรือการ์ตูนให้กับองค์ประกอบ HTML ของคุณได้ คุณสามารถปรับตำแหน่ง ขนาด สี และอื่นๆ ได้อย่างง่ายดาย
ไอคอนเบราว์เซอร์ SVG แบบเคลื่อนไหว
ไอคอน SVG แบบเคลื่อนไหวเหล่านี้เป็นสิ่งที่เว็บไซต์ของคุณต้องการอย่างแท้จริง เป็นวิธีที่สมบูรณ์แบบในการบอกลูกค้าของคุณว่าแอป ธีม หรือเกมของคุณทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์หลักทั้งหมด
เติมชีวิตชีวาให้กับ Premium Add-on: Web Promotional Icons
ชุดนี้ประกอบด้วยไอคอนโปรโมตเว็บ 50 รายการ นี่เป็นส่วนเสริมสำหรับ Enliven'em แต่ละไอคอนมาพร้อมกับรูปแบบพื้นหลัง 5 แบบ ซึ่งหมายความว่าคุณจะได้รับไฟล์ SVG ทั้งหมด 250 ไฟล์
Trigons – สร้างและทำให้ภาพ SVG นามธรรมเคลื่อนไหว
นี่เป็นสคริปต์ JS ที่ยืดหยุ่นมาก ซึ่งจะช่วยคุณในการสร้างภาพ SVG ที่ทันสมัยและมีสไตล์พร้อมภาพเคลื่อนไหวที่เป็นตัวเลือก ชุดนี้มีเอฟเฟกต์แอนิเมชั่นในตัว 30 แบบ ซึ่งคุณสามารถใช้เพื่อสร้างโปรเจ็กต์การออกแบบเว็บที่สมบูรณ์แบบ
Cyclo – SVG Loaders Kit
ตัวโหลดล่วงหน้า HTML5 แบบวงกลม
นี่คือตัวโหลดล่วงหน้า HTML5 แบบวงกลม ซึ่งจะทำให้การเปลี่ยนแปลงระหว่างประสบการณ์ผู้ใช้ปกติและการเดินทางที่ราบรื่นไปยังเนื้อหาของเว็บไซต์ของคุณ
แอนิเมชั่นนักดนตรีที่ตอบสนอง
ชุดนี้ประกอบด้วยนักดนตรี SVG ที่เคลื่อนไหวได้หลายคนและไฟล์เวกเตอร์ดั้งเดิม คุณยังมีแพ็คเกจสาธิต แพ็คเกจของนักดนตรีอีกด้วย แพ็คนี้มีเอกสารดีมาก
แพ็คไอคอน SVG ไอคอนเคลื่อนไหว
Mega Pack ไอคอน SVG แบบเคลื่อนไหวจะทำให้ภาพเวกเตอร์ของคุณมีชีวิตชีวา สิ่งที่คุณต้องทำคือบันทึกงานศิลปะของคุณ เพิ่มโค้ดหนึ่งบรรทัดลงใน HTML ของคุณ เท่านี้ก็เรียบร้อย!
รถตักพับ เคลื่อนไหว SVG
แอนิเมชั่น Folding Loader SVG นั้นสมบูรณ์แบบสำหรับหน้าตัวโหลดล่วงหน้าของคุณ ใช้อย่างมั่นใจ!
Flatimation SVG – ชุดไอคอน SVG แบบเคลื่อนไหว
ชุดไอคอนภาพเคลื่อนไหว Flatimations SVG จะทำให้เว็บไซต์ของคุณสนุกและสร้างสรรค์มากขึ้น ไอคอนที่สะดุดตาเหล่านี้จะดูดีบนอุปกรณ์และเบราว์เซอร์ทุกประเภท
สไลด์โชว์ภาพถ่ายกล้อง Retro SVG
สไลด์โชว์ภาพถ่ายกล้อง Retro SVG นี้มีแรงบันดาลใจในการออกแบบเรียบๆ ดูย้อนยุคแต่ร่วมสมัยและเป็นวิธีที่ยอดเยี่ยมในการสร้างภาพเคลื่อนไหวและแสดงภาพ
16 ไอคอน SEO แบบเคลื่อนไหว
การมีและใช้ไอคอน SEO แบบเคลื่อนไหว 16 ไอคอนซึ่งจะทำให้เว็บไซต์ของคุณมีชีวิตชีวาได้อย่างไร เป็นกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้อย่างสมบูรณ์ และจะดูดีบนอุปกรณ์และเบราว์เซอร์ทุกประเภท
เมนู Gooey: ปลั๊กอิน jQuery
ปลั๊กอินนี้จะช่วยคุณสร้างเมนูเหนอะหนะที่มีวงกลมเป็นรายการ มันใช้ฟิลเตอร์ SVG ที่มีสไตล์เมนู 6 แบบ มาพร้อมกับตัวเลือกที่ปรับแต่งได้มากมายและอีกมากมาย
40 ไอคอนโซเชียลมีเดีย SVG แบบเคลื่อนไหว
นี่คือชุดไอคอน SVG แบบเคลื่อนไหวที่เจ๋งจริงๆ ซึ่งเป็นวิธีที่สมบูรณ์แบบในการนำทางผู้เยี่ยมชมเว็บไซต์ของคุณไปยังหน้าโซเชียลมีเดียของคุณ
ลูกโลก SVG แบบเคลื่อนไหวพร้อมเครื่องหมายและโลโก้
นี่คือลูกโลก SVG แบบแอนิเมชั่นสุดเจ๋งที่มีเครื่องหมายและโลโก้ที่ทำงานได้ดีบนอุปกรณ์เคลื่อนที่และเดสก์ท็อป เป็นวิธีที่สมบูรณ์แบบในการแสดงภาพสถานที่
เครื่องเล่นเสียง Gear HTML5
ตอนนี้คุณสามารถแสดงเพลงของคุณอย่างสร้างสรรค์ได้อย่างง่ายดาย Gear Player นี้มีอินเทอร์เฟซผู้ใช้ที่น่าดึงดูดซึ่งคุณจะต้องชอบอย่างแน่นอน
แผนภูมิวงกลม 3 มิติพร้อม JavaScript
แผนภูมิวงกลม 3 มิตินี้พัฒนาขึ้นในทางเลือก JavaScript, SVG และ VML คุณสามารถปรับแต่ง เปลี่ยนตำแหน่ง ความสูง รัศมี คุณลักษณะคำอธิบาย ขนาดข้อความ และอื่นๆ อีกมากมายได้อย่างง่ายดาย
ตัวอย่างเว็บไซต์ที่ยอดเยี่ยมที่ใช้พลังของ SVG
นักรบ: ผู้พิชิตความเป็นเลิศ
ชุดเกมเหล่านี้สร้างขึ้นโดยใช้ SVG สำหรับแอนิเมชั่นและกราฟิก Posture & Balance เป็นเกมแรกที่สร้างขึ้นสำหรับแพลตฟอร์มที่เรียกว่า Cavalier ซึ่งได้รับการออกแบบด้วยเทคโนโลยีที่เป็นนวัตกรรมใหม่
Poignee de main virile
เว็บไซต์ใหม่ที่เป็นภาพเคลื่อนไหวและรูปถ่ายนี้สร้างขึ้นสำหรับการออกแบบกราฟิกในฝรั่งเศสและสตูดิโอสร้างสรรค์ดิจิทัล Poignee de main virile ผลที่ได้คือเหลือเชื่อ!
iFly50
เมื่อนิตยสาร FLY KLM เฉลิมฉลองฉบับที่ห้าสิบ นิตยสารดังกล่าวได้ออกแบบเว็บไซต์แอนิเมชั่นสีสันสดใสสำหรับคอลเลกชั่นการเดินทางขั้นสุดยอด ด้วยวิธีนี้จึงมีการนำเสนอ 50 สถานที่ที่สวยงามและน่าสนใจที่สุดในโลก
The ARK: Star Citizen Starmap
เว็บไซต์นี้ใช้อินเทอร์เฟซ ARK ที่น่าทึ่งนำเสนอ Robert's Space Industries ผู้ผลิตยานอวกาศภายในเกม "Star Citizen" นี่คือพอร์ทัลสำหรับข้อมูล อัปเดต และซื้อยานอวกาศของคุณเอง ซึ่งคุณสามารถปกป้องพลเมืองของ Star Citizen
ทำให้แผ่นดินไหวแปลก
Keep Earthquakes Weird เป็นแพลตฟอร์มที่สร้างขึ้นด้วยเอฟเฟกต์กราฟิก SVG ที่น่าทึ่ง ซึ่งสร้างขึ้นโดยมีเป้าหมายเพื่อเตรียมประชากรในพอร์ตแลนด์ในกรณีที่เกิดแผ่นดินไหว เนื้อหาให้ความรู้ดีมาก
30u
30u คือ e-shop ที่ขายรองเท้าบนเว็บไซต์ที่สร้างโดยนักพัฒนาที่ให้ความสำคัญกับสไตล์และใช้คุณสมบัติ SVG ที่น่าสนใจ
กลุ่ม QED
ไซต์ QED GROUP มีภาพประกอบที่มีการชี้นำที่น่าทึ่ง ซึ่งจะมอบประสบการณ์การนำทางที่ยอดเยี่ยมแก่คุณ เลย์เอาต์ของเว็บไซต์มีระดับและชาญฉลาด
Melanie Daveid
เว็บไซต์ของ Melanie Daveid เป็นหนึ่งในเว็บไซต์ผลงานที่อร่อยที่สุดที่สามารถพบได้บนเว็บ เว็บไซต์มีการเปลี่ยนภาพที่ราบรื่นและภาพประกอบมือที่งดงาม
WWF ฝรั่งเศส – Earth Hour Paris
ไซต์แอนิเมชั่นนี้สร้างขึ้นสำหรับ WWF ประเทศฝรั่งเศส และใช้เพื่อประกาศว่าในวันที่ 19 มีนาคม หอไอเฟลจะปิดไฟสำหรับ Earth Hour
Nerisson
Nerisson หรือที่รู้จักในชื่อ Jimmy Raheriarisoa เป็นผู้กำกับศิลป์ชาวฝรั่งเศสที่เชี่ยวชาญด้านการออกแบบเว็บ/มือถือ ภาพประกอบ และการเคลื่อนไหว นี่เป็นไซต์แฟ้มผลงานที่ยอดเยี่ยม พร้อมด้วยภาพประกอบและคุณลักษณะด้านกราฟิกที่สวยงาม
บริษัทออกแบบเดียว
One Design Company เป็นทีมนักออกแบบ นักพัฒนา ผู้จัดการโครงการ นักเขียนและศิลปินมากประสบการณ์ ไซต์ของพวกเขามีความสดใสและโต้ตอบได้โดยใช้ภาพ SVG ที่คมชัด
มิโดริ อาโอยามะ
Midori Aoyama เป็นดีเจและโปรดิวเซอร์ในโตเกียว เขาได้เปิดตัวปาร์ตี้ของตัวเอง “EUREKA!” ที่ยังคงเป็นหนึ่งในปาร์ตี้ดนตรีที่ดีที่สุดในญี่ปุ่น ไซต์ของเขายังเป็นนวัตกรรมอีกด้วย เป็นตัวอย่างที่น่าสนใจของ SVG และวิธีที่คุณจะได้รับประโยชน์จากไซต์นี้ในฐานะผู้ใช้