स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) एक्सएमएल में लिखा गया एक छवि प्रारूप है। एसवीजी के साथ, आप दो-आयामी स्केलेबल ग्राफिक्स को कोड कर सकते हैं। फिर, आप उन्हें सीएसएस और जावास्क्रिप्ट में लागू और संशोधित कर सकते हैं।
एसवीजी तीन प्रकार के ग्राफिक्स की अनुमति देता है: वेक्टर आकृतियाँ (सभी दिशाओं और आकृतियों में सीधी और घुमावदार रेखाएँ), चित्र और पाठ। अपनी विभिन्न क्षमताओं के कारण, वेब डिजाइनर जटिल एनिमेशन बनाने के लिए एसवीजी की ओर रुख करते हैं। उन्हें स्थापित करना आसान है, आकार बदलने पर गुणवत्ता खोना नहीं है और काम करने के लिए किसी तीसरे पक्ष के एप्लिकेशन की आवश्यकता नहीं है।
चूंकि एनिमेशन अभी भी लोकप्रियता में बढ़ रहे हैं, अधिकांश उनसे परिचित नहीं हैं। यह आलेख 20 शानदार एसवीजी एनिमेशन को उजागर करेगा जो इस प्रारूप की क्षमता को दर्शाता है।
1. मेडिकल एसवीजी आइकॉन किटन द्वारा
त्वरित सम्पक
- 1. मेडिकल एसवीजी आइकॉन किटन द्वारा
- 2. सीनमेकफेरी द्वारा हॉवर
- 3. निकोले तालानोव द्वारा पुल डाउन टू रिफ्रेश (पेपर प्लेन)
- 4. बस डिआको एम। लोटफोलही द्वारा जाना जारी रखें
- 5. SVG फिल्टर HTML5 वीडियो में जोड़ा गया
- 6. आरा पहेली
- 7. पैट्रिक यंग द्वारा लाइनर ग्रैडिएंट
- 8. चलो jpperezaguinaga द्वारा यात्रा करते हैं
- 9. घड़ी मोहमद मोहिबफर द्वारा
- 10. लुइगी डी रोजा द्वारा एनिमेटेड प्रतीक
- 11. एसवीजी में सभी उपकरण क्रिस गैनन द्वारा
- 12. क्रिस गैनन द्वारा झरना
- 13. ब्लेक बोवेन द्वारा प्लांट जनरेटर
- 14. हामिश विलियम्स द्वारा क्लिक करने योग्य आइकन
- 15. मार्को बैरिया द्वारा नया केक
- 16. क्रिस गनन द्वारा पेपर श्रेडर
- 17. GRAYGHOST द्वारा कम बहुतायत
- 18. लीला द्वारा आवरग्लास लोडर
- 19. सारा ड्रैसनर द्वारा उत्तरदायी गाय
- 20. डॉमनी द्वारा छात्र
- तुम्हारी बारी
यह गर्म और चिकनी एनीमेशन किसी भी स्वास्थ्य से संबंधित वेबसाइट के लिए बहुत अच्छा है। जब आप विभिन्न थ्रेड्स के माध्यम से सूचीबद्ध करते हैं, तो छवियां सूक्ष्म रूप से दिखाई देंगी। एम्बुलेंस कार या परमाणु का निर्माण होगा, आंख खुल जाएगी, और डॉक्टर कूद जाएगा। यह एनीमेशन एसवीजी के सभी मजेदार और गतिशीलता को दर्शाता है।
संपर्क
2. सीनमेकफेरी द्वारा हॉवर
यूनिवर्सल एनीमेशन जिसे आप किसी भी इंटरैक्टिव वेबसाइट पर डाल सकते हैं। जब आप हॉवर करते हैं तो सीमाओं का सूक्ष्म स्वरूप आपको एक संतोषजनक एहसास के साथ छोड़ देता है और आपको लिंक पर क्लिक करने के लिए आमंत्रित करता है।
संपर्क
3. निकोले तालानोव द्वारा पुल डाउन टू रिफ्रेश (पेपर प्लेन)
जब आप उन पर "पुल डाउन" करते हैं, तो आमतौर पर पृष्ठ ताज़ा हो जाएंगे। यह एनीमेशन इसे एक नए स्तर पर लाता है। जब आप इसे जारी करने के लिए नीचे खींचते हैं, तो आप आकाश में एक पेपर विमान लॉन्च करेंगे। यदि आप चाहते हैं कि आपके आगंतुक अक्सर आपके ऐप को रीफ़्रेश करें, तो आपको इस तरह से एक एनीमेशन जोड़ने पर विचार करना चाहिए।
4. बस डिआको एम। लोटफोलही द्वारा जाना जारी रखें
एक एसवीजी एनीमेशन जो स्केलिंग वेक्टर की क्षमता को दर्शाता है। मानव शरीर का सहज सटीक आंदोलन सम्मोहित कर रहा है।
संपर्क
5. SVG फिल्टर HTML5 वीडियो में जोड़ा गया
Google Chrome टीम के पॉल आयरिश ने देखा कि कैसे एसवीजी वेक्टर ग्राफिक्स के बाहर सामग्री को संशोधित कर सकता है। उन्होंने यह दिखाने के लिए सीएसएस और एसवीजी को अद्भुत दृश्य फिल्टर बनाने के लिए संयुक्त किया कि एसवीजी एनीमेशन एक तैयार वीडियो के लिए एक अच्छा जोड़ हो सकता है।
संपर्क
6. आरा पहेली
आप एसवीजी एनीमेशन के साथ अद्भुत इंटरैक्टिव पहेली बना सकते हैं। इस उदाहरण में, हम कई चित्रों में से एक को चुन सकते हैं और देख सकते हैं कि यह पहेली के कई छोटे टुकड़ों में कैसे बदल जाता है। आप इसे भी फिर से संगठित कर सकते हैं!
संपर्क
7. पैट्रिक यंग द्वारा लाइनर ग्रैडिएंट
यदि आप नीयन रोशनी और सुंदर फोंट में हैं, तो आप इस एनीमेशन का आनंद लेंगे। यह काम दिखाता है कि कैसे आपको एक शानदार एनीमेशन के लिए किसी भी चलती लाइनों की आवश्यकता नहीं है, बस एक महान फ़ॉन्ट और ढाल प्रभाव के साथ उचित रंग कोड।
संपर्क
8. चलो jpperezaguinaga द्वारा यात्रा करते हैं
दो हवाई जहाज और एक गर्म हवा का गुब्बारा दुनिया के लोकप्रिय स्थलों के चारों ओर घूमता है। यह एनीमेशन रंगीन, आशावादी और मन को उड़ाने वाला है। यह सब कुछ दिखाता है जो आप कर सकते हैं यदि आप एसवीजी में निपुण हैं।
संपर्क
9. घड़ी मोहमद मोहिबफर द्वारा
एक चलती घड़ी का एक सरल एसवीजी एनीमेशन जो वर्तमान समय को दर्शाता है। संकेत और न्यूनतर डिजाइन के सुखदायक आंदोलन इस एनीमेशन के लिए चमत्कार करते हैं।
संपर्क
10. लुइगी डी रोजा द्वारा एनिमेटेड प्रतीक
यदि आप इन आइकनों पर मंडराते हैं तो आप एनिमेशन को ट्रिगर करेंगे, जो सरल लेकिन प्रभावी हैं। आप देख सकते हैं कि एक प्रभावशाली एनिमेटेड आइकन बनाने के लिए आपको चमत्कार करने की ज़रूरत नहीं है।
11. एसवीजी में सभी उपकरण क्रिस गैनन द्वारा
एक एक-टेक एनीमेशन जो सभी स्मार्ट उपकरणों पर जाता है जो हम सबसे रचनात्मक तरीके से उपयोग करते हैं। डेस्कटॉप लैपटॉप, लैपटॉप को टैबलेट में बदल देगा, फिर स्मार्टफोन में।
संपर्क
12. क्रिस गैनन द्वारा झरना
क्रिस गनन द्वारा एक और, यह एक झाग वाले झरने के तल का एक साफ-सुथरा प्रदर्शन है। पानी की आवाजाही साफ-सुथरी है, और आप हर चीज को अधिक यथार्थवादी बनाने के लिए एनीमेशन की सीमाओं को छोड़ते हुए पानी की छोटी बूंदों को देख सकते हैं।
संपर्क
13. ब्लेक बोवेन द्वारा प्लांट जनरेटर
अब यह कुछ और है। जब आप 'क्रिएट' बटन पर क्लिक करते हैं, तो आपको पौधे बढ़ते और बढ़ते दिखाई देंगे। लेकिन हर बार जब आप क्लिक करेंगे, तो विभिन्न पैटर्न बनेंगे।
संपर्क
14. हामिश विलियम्स द्वारा क्लिक करने योग्य आइकन
एक और इंटरेक्टिव एसवीजी जो आपके द्वारा क्लिक करने पर एक एनीमेशन को ट्रिगर करता है। इसे क्लिक करते ही यह "सेंड" एनीमेशन शुरू कर देगा।
संपर्क
15. मार्को बैरिया द्वारा नया केक
दिलचस्प एनीमेशन जो एक परत द्वारा केक की परत बनाने को दर्शाता है। यह जन्मदिन कार्ड के लिए उपयुक्त एक प्रभावशाली एसवीजी एनीमेशन है।
16. क्रिस गनन द्वारा पेपर श्रेडर
यदि आप पेपर श्रेडिंग देखने का आनंद लेते हैं, तो आप इस एनीमेशन का आनंद लेंगे जो एक सहज अनुक्रम में पेपर असीमित समय तक मशीन श्रेडिंग पेपर को दर्शाती है।
संपर्क
17. GRAYGHOST द्वारा कम बहुतायत
यह एक मन उड़ाने वाला चित्रण और एनीमेशन है जिसमें एक शेर के सिर को दर्शाया गया है और एनिमेटेड बहुभुज के रूप में गायब हो रहा है।
संपर्क
18. लीला द्वारा आवरग्लास लोडर
एक और प्रभावी एनीमेशन जो केवल एसवीजी का उपयोग करता है। हर 5 सेकंड में, प्रति घंटा उल्टा हो जाएगा और एक नया चक्र शुरू होगा।
संपर्क
19. सारा ड्रैसनर द्वारा उत्तरदायी गाय
यह एक मज़ेदार इंटरैक्टिव एनीमेशन है जो आपको गाय पर क्लिक करने और चाँद के चारों ओर खींचने की अनुमति देता है जबकि एक चकित अंतरिक्ष यात्री इसे देखता है।
20. डॉमनी द्वारा छात्र
एक उत्साही छात्र सीखने के लिए तैयार दिखाई देता है! यह एक महान एनीमेशन है जहां पुस्तक पृष्ठ बड़े करीने से बदल रहे हैं। छात्र से कोई ब्लिंकिंग नहीं है, लेकिन इस सूची को समाप्त करने के लिए यह अभी भी पूरी तरह से स्पष्ट एनीमेशन है।
संपर्क
तुम्हारी बारी
आपके पसंदीदा एसवीजी एनिमेशन इस सूची में शामिल नहीं हैं? नीचे टिप्पणी में अपने पिक्स साझा करें!
