5 एसवीजी एनिमेशन आपके वेब डिज़ाइन को जीवंत बनाने के लिए

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

स्केलेबल वेक्टर ग्राफिक्स के साथ काम करना

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

आकार बदलने के लिए महान होने के साथ-साथ, आप HTML के भीतर SVG कोड का भी उपयोग कर सकते हैं, और यह किसी अन्य तत्व की तरह कार्य करेगा। इसका मतलब है कि आप उपयोग कर सकते हैं सीएसएस नियम, जावास्क्रिप्ट कोड, और, सबसे महत्वपूर्ण बात, आपकी वेबसाइट के एसवीजी के साथ एनिमेशन।

आप Adobe Illustrator जैसे सॉफ़्टवेयर और SVGator जैसी वेबसाइटों का उपयोग करके SVG बना सकते हैं, लेकिन आप उन्हें हाथ से भी बना सकते हैं। एसवीजी प्रारूप एक सादा पाठ एक्सएमएल भाषा है और एचटीएमएल जैसा दिखता है।

इस उदाहरण में चार बटन हैं जिनके अपने आइकन हैं और एक ब्लॉक-रंगीन पृष्ठभूमि है। जब आप एक बटन का चयन करते हैं, तो यह एक वृत्त से एक गोल आयत में बदल जाता है, साथ ही बटन से मिलान करने के लिए पृष्ठ के पृष्ठभूमि रंग को भी बदल देता है।

JS और CSS का मिश्रण इन परिणामों को उत्पन्न करता है, और यह सब एक लूप से शुरू होता है कि ईवेंट श्रोताओं को जोड़ता है प्रत्येक बटन को।

के लिए (वर मैं = 0; मैं  मेनू आइटम [i]। AddEventListener ('क्लिक', बटनक्लिक);
}

एक बार बटन पर क्लिक करने के बाद, बटनक्लिक () नामक एक फ़ंक्शन कई क्रियाएं करता है। यह पृष्ठ की पृष्ठभूमि का रंग बदलकर शुरू होता है:

दस्तावेज़.body.style.backgroundColor = `#${यह.getAttribute ('डेटा-पृष्ठभूमि')}`;

इसके बाद, यह दबाए गए बटन में एक सीएसएस वर्ग जोड़ता है, एनीमेशन को ट्रिगर करता है और बटन के पृष्ठभूमि रंग को बदलता है।

menuItemActive.classList.remove('मेनू__आइटम--सक्रिय');
यह.वर्गसूची.जोड़ें ('मेनू__आइटम--सक्रिय');
menuItemActive.classList.add('मेनू__आइटम--चेतन');
यह.वर्गसूची.जोड़ें ('मेनू__आइटम--चेतन');
मेनूआइटमएक्टिव = यह;

सरल होते हुए भी, यह SVG एनिमेशन उदाहरण आपकी वेबसाइट को अधिक आकर्षक बनाने का एक अनूठा तरीका प्रदान करता है। इस प्रकार की डिज़ाइन सुविधा मोबाइल वेबसाइटों और HTML-आधारित ऐप्स के लिए एकदम सही है।

आप SVG पथ में जितने चाहें उतने नोड जोड़ सकते हैं, जिससे वे टेक्स्ट बनाने के लिए आदर्श बन जाते हैं। यह सरल स्ट्रोक एनीमेशन तकनीक को पूरी तरह से प्रदर्शित करता है, जिसमें पाठ बाएं से दाएं दिखाई देता है जैसे कि इसे लिखा जा रहा हो।

एनिमेशन में कीफ़्रेम नहीं होते हैं, यह बस CSS ट्रांज़िशन प्रॉपर्टी के साथ एक नई स्ट्रोक चौड़ाई लागू करता है। यह जटिल एनीमेशन के बिना प्रत्येक पंक्ति को स्क्रीन पर स्वयं को आकर्षित करता है।

पथ-1 {
 स्ट्रोक-दशरे: 1850 2000;
 स्ट्रोक-डैशऑफ़सेट: 1851;
 संक्रमण: 5s रैखिक;
}

एक JS फ़ंक्शन कोड के घनत्व को और कम करने के लिए सिंगल पैरेंट CSS क्लास का उपयोग करके टेक्स्ट के प्रत्येक सेक्शन में एक अद्वितीय CSS क्लास जोड़ता है।

$(समारोह() {
समारोहएनीमेशनशुरू() {
 $('#कंटेनर').एडक्लास ('पंख');
 }
सेटटाइमआउट (एनीमेशनस्टार्ट, 250);
});

केवल CSS उदाहरण के रूप में, यह SVG एनीमेशन उन सभी के लिए बहुत अच्छा है जो अपने पैर की उंगलियों को जावास्क्रिप्ट कोड में डुबाना नहीं चाहते हैं। विचार सरल है: एक बटन एक रेखांकन से शुरू होता है जो एक पूर्ण सीमा में रूपांतरित हो जाता है जब आप उस पर होवर करते हैं।

CSS कीफ़्रेम बटन के लिए दो स्थितियाँ बनाते हैं। पहले राज्य में एक मोटा स्ट्रोक होता है और केवल 0% से शुरू होने वाले SVG आकार के बटन के निचले भाग को कवर करता है। अन्य राज्य एक पतले स्ट्रोक के साथ 100% पर पूर्ण बटन है।

@कीफ़्रेम खींचना {
 0% {
 स्ट्रोक-दशरे: 140 540;
 स्ट्रोक-डैशऑफ़सेट: -474;
 स्ट्रोक-चौड़ाई: 8px;
 }
100% {
 स्ट्रोक-दशरे: 760;
 स्ट्रोक-डैशऑफ़सेट: 0;
 स्ट्रोक-चौड़ाई: 2px;
 }
}

ये कीफ्रेम केवल एसवीजी आकार बटन की रूपरेखा पर लागू होते हैं जब उपयोगकर्ता कर्सर को बटन पर ले जाता है। यह उपयोग करता है: होवर सीएसएस छद्म वर्ग इसे प्राप्त करने के लिए, एक नियम को ट्रिगर करना जो बटन में एनिमेशन कीफ़्रेम जोड़ता है।

.svg-आवरण:होवर।आकार {
-वेबकिट-एनीमेशन: 0.5sखींचनारैखिकआगे;
एनीमेशन: 0.5sखींचनारैखिकआगे;
}

यह दिखाता है कि आप जटिल कोड का उपयोग किए बिना सुंदर एनिमेशन कैसे बना सकते हैं। आप अपनी खुद की वेबसाइट के लिए अधिक विस्तृत इंटरैक्टिव तत्व बनाने के लिए इन बुनियादी बातों और अपनी रचनात्मकता का उपयोग कर सकते हैं।

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

शुरू करने के लिए, यह वर्तमान दिनांक और समय एकत्र करने के लिए दिनांक () फ़ंक्शन का उपयोग करता है। इस मान का उपयोग करते हुए, getHours (), getMinutes (), और getSeconds () फ़ंक्शन डेटा को उसके प्रासंगिक भागों में विभाजित करते हैं। कोड तब घड़ी पर प्रत्येक हाथ की स्थिति की गणना करता है।

वर तिथि = नवीन वदिनांक();
वर घंटेकोण = 360 * date.getHours () / 12 + date.getMinutes () / 2;
वर मिनटकोण = 360 * date.getMinutes () / 60;
वर सेकंडएंगल = 360 * date.getSeconds () / 60;

प्रत्येक हाथ को एक सरणी में संग्रहीत करके, हर बार कोड चलने पर उनकी स्थिति बहुत आसानी से निर्धारित की जा सकती है।

हाथ [0]। सेट विशेषता ('से', शिफ्टर (सेकंडएंगल));
हाथ [0]। सेट विशेषता ('को', शिफ्टर (सेकएंगल + 360));
हाथ [1]। सेट एट्रिब्यूट ('से', शिफ्टर (मिनटएंगल));
हाथ [1]। सेट एट्रिब्यूट ('को', शिफ्टर (मिनटएंगल + 360));
हाथ [2]। सेट एट्रिब्यूट ('से', शिफ्टर (घंटेएंगल));
हाथ [2]। सेट एट्रिब्यूट ('को', शिफ्टर (घंटेएंगल + 360));

वेब डिज़ाइन के क्षेत्र में समय के सीमित अनुप्रयोग हैं, लेकिन यह उलटी गिनती टाइमर, घड़ियों और टाइमस्टैम्प को संग्रहीत करने के लिए उपयोगी है। यह उदाहरण चर के साथ गतिशील एसवीजी एनिमेशन बनाने में एक अंतर्दृष्टि प्रदान करता है।

यह सीएसएस-संचालित एसवीजी एनीमेशन किसी भी रूप को अविश्वसनीय दिखने का एक साफ तरीका प्रदान करता है।

कुछ भी चयनित नहीं होने के कारण, प्रपत्र में प्रत्येक फ़ील्ड के नीचे ग्रे-आउट रेखाएँ होती हैं। जब कोई फ़ील्ड चुनी जाती है, तो एक रेखा दिखाई देती है, जो एक चिकनी एनीमेशन के साथ बाईं ओर से खिसकती है। यदि उपयोगकर्ता किसी भिन्न फ़ील्ड का चयन करता है, तो रेखा सुचारू गति में अपनी नई स्थिति में स्लाइड करती है।

अंत में, एक बार जब उपयोगकर्ता प्रेस करता है लॉग इन करें बटन, लाइन एक सर्कल में बदल जाती है जो पेज लोड होने पर स्पंदित होती है।

यह एसवीजी उदाहरण विशेष रूप से प्रभावशाली है क्योंकि यह इतना जटिल परिणाम उत्पन्न करने के लिए केवल सीएसएस पर निर्भर करता है। यह डेटा स्टोर करने के लिए CSS वेरिएबल्स का उपयोग करता है, जिससे मुख्य ऐप जैसे तत्वों को नियंत्रित करना आसान हो जाता है।

$ ऐप-पैडिंग: 6वीएच;
$ ऐप-चौड़ाई: 50वीएच;
$ ऐप-ऊंचाई: 90वीएच;
#अनुप्रयोग {
 चौड़ाई: $ ऐप-चौड़ाई;
 ऊंचाई: $ ऐप-ऊंचाई;
 पैडिंग: $ ऐप-पैडिंग;
 पृष्ठभूमि: सफेद;
 डब्बे की छाया: 002रेमो आरजीबीए(काला, 0.1);
}

आप इस उदाहरण का उपयोग लगभग किसी भी वेब फ़ॉर्म पर कर सकते हैं, और अपने उपयोगकर्ताओं को पहले की तरह शामिल कर सकते हैं।

HTML, JS और CSS के साथ अपना खुद का SVG एनिमेशन बनाना

जब आप पहली बार शुरू करते हैं तो खरोंच से एक एसवीजी एनीमेशन बनाना एक कठिन प्रक्रिया हो सकती है। ये उदाहरण आपको एसवीजी एनिमेशन बनाने के लिए आवश्यक शुरुआत देंगे जो आपकी वेबसाइट को चमकदार बनाएंगे।

9 उन्नत मीडिया क्वेरी सीएसएस ट्रिक्स जो आपको पता होनी चाहिए

आगे पढ़िए

लेखक के बारे में