आपकी प्रेरणा के लिए 30 बहुत बढ़िया एसवीजी एनीमेशन

डिज़ाइनर CSS का उपयोग करके HTML तत्वों में एनिमेशन बनाते थे। हालांकि, पैटर्न, आकार और अन्य बनाने में HTML तत्वों की सीमाओं के कारण, वे स्वाभाविक रूप से एसवीजी की ओर मुड़ते हैं, जो अधिक रोचक क्षमताओं की पेशकश करता है.

एसवीजी के साथ काम करते हुए, हम एसवीजी एनीमेशन के लिए अच्छे ब्राउज़र सपोट का आनंद लेते हैं, और हमारे पास नए एनीमेशन बनाने के लिए और अधिक तरीके हैं। आप अंतर्निहित एसवीजी एनीमेशन कार्यक्षमता या CSS3 एनीमेशन दोनों का उपयोग कर सकते हैं (ध्यान दें कि सब कुछ CSS द्वारा नहीं किया जा सकता है इसलिए जावास्क्रिप्ट की अभी भी आवश्यकता है)। दूसरा तरीका जावास्क्रिप्ट इंजन जैसे जीएसएपी या स्नैप का उपयोग करना है। जेएस एनीमेशन बनाने के लिए अच्छा अभ्यास है.

यहाँ मैंने कुछ अद्भुत एनिमेटेड SVG संकलित किए हैं। कुछ एसवीजी एनीमेशन का उपयोग करते हैं, अन्य बुनियादी एनीमेशन के लिए सीएसएस ट्रांसफॉर्मेशन का उपयोग करते हैं, और बाकी जावास्क्रिप्ट की मदद से उपयोग करते हैं.

शॉन मैककफेरी द्वारा बॉर्डर एनिमेशन

केवल सीएसएस के साथ बनाया गया है, पाठ के चारों ओर एक सीमा आसानी से बनती है, जब आप ओवर होवर करते हैं “मंडराना” अनुदेश.

निकोले तालानोव द्वारा लोचदार एसवीजी साइडबार

साइडबार लोचदार हो जाता है जब आप इसे साइड से दूर खींचने की कोशिश करते हैं। सामग्री डिजाइन-प्रेरित अनुप्रयोग साइडबार पर एक अच्छी अवधारणा लागू होती है.

निकोले तालानोव द्वारा ताज़ा करने के लिए नीचे खींचो

अधिकांश पृष्ठ आपको अनुमति देते हैं “नीचे खींचना” ताज़ा करने के लिए पेज पर। इस एनीमेशन के साथ, जब आप “रिहाई” पृष्ठ, भेजें आइकन प्लेन आइकन में बदल जाता है और हवा में जारी हो जाता है.

पैट्रिक यंग द्वारा पाठ पर एनिमेटेड स्नातक

यहाँ एक सूक्ष्म लेकिन इतना आसान नहीं है कि चलती टेक्स्ट ग्रैडिएंट को याद कर सकें जिसे टाइपोग्राफी प्रेमी पसंद करेंगे.

निकोले तालानोव द्वारा हार्ट एनीमेशन

यह एनीमेशन आपको दिखाता है कि कैसे एक दिल का आइकन दो सर्कल और एक वर्ग से बनाया गया है। परिवर्तन सीएसएस एनीमेशन के साथ किया जाता है.

आइए यात्रा करें jjperezaguinaga द्वारा

एक एनीमेशन जो शहरों और दुनिया के लोकप्रिय पर्यटन स्थलों का वर्णन करता है। चाल और परिवर्तन CSS एनीमेशन का उपयोग करके बनाए गए हैं.

Tamino Martinius द्वारा मेनू टॉगल एनीमेशन

हैमबर्गर आइकन का मॉर्फिंग एनीमेशन क्रॉस आइकन में बदल जाता है। देखें कि दोनों वस्तुओं के बीच संक्रमण कितना सुचारू है.

Sdras द्वारा एनिमेटेड इन्फोग्राफिक

जीएसएपी समयरेखा द्वारा संचालित सारा ड्रैसनर द्वारा एक भयानक एनीमेशन। यह जीवन के लिए एक इन्फोग्राफिक है, जिसे एनीमेशन के साथ बनाया गया है। किसी भी बिंदु से फ़्रेम तक पहुंचने के लिए स्लाइडर का उपयोग करें.

बारिश-ब्रदर्स को जेएस की पसंद नहीं है

पात्रों के चलने को दर्शाने वाला एक अनोखा और मज़ेदार लूप एनीमेशन। इस डेमो में वस्तुओं की आवाजाही SVG और CSS3 एनीमेशन का संयोजन है। पैर SVG एनीमेशन का उपयोग करते हैं जबकि अन्य भाग CSS3 एनीमेशन का उपयोग करते हैं.

घड़ी मोहमद मोहिबफर द्वारा

इस घड़ी में दूसरे हाथ की चिकनी गति देखें, जो वर्तमान समय दिखा रही है। एनीमेशन पूरी तरह से एसवीजी एनीमेशन कार्यक्षमता का उपयोग करके बनाया गया है.

क्रिस गैनन द्वारा रेनबो रॉकेट मैन

एक अंतरिक्ष यात्री यह इंद्रधनुष-संचालित जेट पैक (?) के साथ अंतरिक्ष में शूटिंग कर रहा है। जीएसएपी ट्विनमैक्स प्लगइन का उपयोग करके बनाया गया अच्छा एनीमेशन.

लुइगी डी रोजा द्वारा एनिमेटेड आइकन

हालांकि इन एनिमेटेड एसवीजी आइकनों पर यह जांचने के लिए कि वे क्या कर सकते हैं। निर्माता ने इसे GSAP का उपयोग करके बनाया.

फ्लैट कार्यक्षेत्र Hoàng Nhật द्वारा

एनीमेशन फ्लैट शैली के डिजाइन में एक कार्यक्षेत्र दिखाता है। निर्माता ने वर्कस्टेशन बनाने के इस भयानक एनीमेशन को बनाने के लिए GSAP का उपयोग किया.

हामिश विलियम्स द्वारा क्लिक करने योग्य एनिमेटेड आइकन

यह एक शांत एनीमेशन है जो Snap.svg लाइब्रेरी का उपयोग करता है। मेल होने के लिए क्लिक करें “भेज दिया”.

क्रिस गैनन द्वारा डाइविंग

क्या आपने कभी झील की सतह पर पत्थर गिराए हैं? यहाँ एक सरल एसवीजी पथ एनीमेशन दिखाया गया है, लेकिन कोई पत्थर नहीं है, और कोई झील नहीं है.

LegoMushroom द्वारा वेब के लिए मोशन

इसमें एनीमेशन, एक अच्छी धुन, पाठ के लिए सुपर कूल प्रवेश, क्या पसंद नहीं है? यह mo.js, एक गति ग्राफिक जावास्क्रिप्ट पुस्तकालय के साथ बनाया गया है.

ली पोर्टर द्वारा एनिमेटेड लेखन फ़ॉन्ट

पथ एनीमेशन को एक आकृति बनाने के लिए एसवीजी का उपयोग करने के अलावा, आप इसे टाइपोग्राफी पर उपयोग कर सकते हैं जैसे कि इस निर्माता ने क्या बनाया। धुंधला प्रभाव इसे और अधिक भयानक बनाता है.

लुकास बीबर द्वारा Gooey मेनू

इस डिज़ाइन में gooey प्रभाव के साथ मज़े करें, जो SVG फ़िल्टर का उपयोग करके और CSS एनीमेशन जोड़कर बनाया गया है। परिणाम यथार्थवादी और वास्तव में अच्छा है, और आप चार अलग-अलग संस्करणों के साथ खेल सकते हैं.

मार्को बैरिया द्वारा नया केक

एसवीजी और सीएसएस एनीमेशन के साथ एक स्तरित जन्मदिन का केक कैसे बनाया जाए.

राहेल स्मिथ द्वारा धन्यवाद

बस एक सरल धन्यवाद नोट के इस भयानक एनीमेशन को देखें। यह एसवीजी और जीएसएपी ट्विनमैक्स लाइब्रेरी का उपयोग करके बनाया गया है.

मारियो सांचेज़ मसेली द्वारा सीएसएस बनाम एसवीजी

अब सीएसएस और एसवीजी एनीमेशन के बारे में तुलना करते हैं, क्या आप अंतर देखते हैं?

मार्क नेल्सन द्वारा वॉकिंग डॉग

एसवीजी को चेतन करने का एक अन्य तरीका स्प्राइट छवियों का उपयोग करना है, जैसे कि इस निर्माता ने कैसे किया.

लीला द्वारा घंटाघर लोडर

शुद्ध एसवीजी एनीमेशन (एसएमआईएल) का उपयोग करके बनाया गया एक रचनात्मक काम; कोई सीएसएस या जेएस यहां चेतन करने के लिए नहीं.

लोगो एनीमेशन Adem ilter द्वारा

यहाँ इनलाइन SVG एनीमेशन का उपयोग करते हुए एक अच्छा एनिमेटेड लोगो परिचय है। सब कुछ काम करने के लिए कोई CSS या JS का उपयोग नहीं किया गया था.

जोनास Badalic द्वारा आँकड़े एनीमेशन

Snap.SVG लाइब्रेरी द्वारा संचालित SVG एनीमेशन के साथ एक सुंदर आँकड़े ग्राफ.

ओरेलबोरोस नोएल डेलगाडो द्वारा

एक अद्भुत एसवीजी एनीमेशन पथ। पहले निर्माता ने एनीमेशन जोड़ने के लिए tween.js का उपयोग करने से पहले, एसवीजी पर एक पथ मार्ग आकर्षित किया.

लुकास बीबर द्वारा क्रिएटिव गोए इफेक्ट्स

यहां गोवी जैसा प्रभाव बनाने के लिए एसवीजी फिल्टर के सात रचनात्मक उपयोग हैं। संगीत विज़ुअलाइज़र मेरा पसंदीदा है, एनीमेशन बहुत अच्छा लग रहा है.

सारा ड्रैसनर द्वारा गाय फेंको

यह एक एसवीजी एनीमेशन है जो ट्वीनमैक्स द्वारा संचालित है लेकिन सिर्फ मनोरंजन के लिए बनाया गया है। ग्रह के चारों ओर गाय को पकड़ो और खींचें। यह "ऑर्बिट" में घूमेगा.

अली द्वारा एनिमेटेड लोगो

बुदबुदाती बियर लोगो के लिए एनीमेशन एक अच्छा छोटा जोड़ हो सकता है। अच्छा छोटे फ्लोटिंग बुलबुले पूरी तरह से एसवीजी देशी एनीमेशन सिंटैक्स के साथ निर्मित होते हैं.