🕳️ 👨‍🚒 💥 सीएसएस और एसवीजी एनिमेशन के साथ इंटरैक्टिव इन्फोग्राफिक। 🤹 🍐 🦕

हाल ही के ब्राउज़रों में तेजी से प्रदर्शित होने वाली सबसे कम चर्चा वाली विशेषताओं में से एक है एसवीजी फाइलों का समर्थन। यह प्रारूप प्रदर्शन में पूर्ण स्वतंत्रता की विशेषता है: यह आसानी से आकार में बदलता है, गुणवत्ता के नुकसान के बिना किसी भी संकल्प में प्रदर्शित किया जा सकता है। कई मामलों में, एसवीजी की तुलना में बहुत कम वजन होता है, उदाहरण के लिए, पीएनजी या जेपीजी।

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

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

एसवीजी फ़ाइल तैयारी

एसवीजी ग्राफिक्स बनाने के कई तरीके हैं, परिचित एडोब इलस्ट्रेटर से मुक्त इंकस्केप तक। सॉफ्टवेयर की पसंद के बावजूद, वस्तुओं को एक साथ समूहित करना और इन समूहों को नाम देना बहुत महत्वपूर्ण है। यह हमें हमारे एसवीजी को एक विशिष्ट पदानुक्रम में बदलने की अनुमति देगा, जिसका उपयोग हम भविष्य में सीएसएस और / या जावास्क्रिप्ट में करेंगे।

हमारे उदाहरण में, जब हम अपने एसवीजी को बचाते हैं और इसे एक टेक्स्ट एडिटर में खोलते हैं, तो हमें निम्न संरचना मिलती है:

<g id="background"> <g id="bg-lines-left"> <!--    --> </g> <g id="bg-lines-right"> <!--    --> </g> </g> <g id="logo"> <!--  --> </g> <g id="quote"> <g id="quote-left-brace"> <!--    --> </g> <g id="quote-right-brace"> <!--    --> </g> <g id="quote-text"> <!--  --> </g> </g> <g id="timeline"> <g id="coffee"> <rect id="coffee-bar" /> <polyline id="coffee-arrow" /> <g id="coffee-time"> <!--  --> </g> <g id="coffee-badge"> <circle id="coffee-circle" /> <g id="coffee-title"> <!--  --> </g> <g id="coffee-details"> <!-- ,  --> </g> </g> </g> <g id="design"> <rect id="design-bar" /> <polyline id="design-arrow" /> <g id="design-time"> <!-- --> </g> <g id="design-badge"> <circle id="design-circle" /> <g id="design-title"> <!--  --> </g> <g id="design-details"> <!-- ,  --> </g> </g> </g> <g id="build"> <rect id="build-bar" /> <polyline id="build-arrow" /> <g id="build-time"> <!--  --> </g> <g id="build-badge"> <circle id="build-circle" /> <g id="build-title"> <!--  --> </g> <g id="build-details"> <!-- , --> </g> </g> </g> <g id="complain"> <rect id="complain-bar" /> <polyline id="complain-arrow" /> <g id="complain-time"> <!--  --> </g> <g id="complain-badge"> <circle id="complain-circle" /> <g id="complain-title"> <!--  --> </g> <g id="complain-details"> <!-- ,  --> </g> </g> </g> <g id="beer"> <rect id="beer-bar" /> <polyline id="beer-arrow" /> <g id="beer-time"> <!--  --> </g> <g id="beer-badge"> <circle id="beer-circle" /> <g id="beer-title"> <!--  --> </g> <g id="beer-details"> <!-- ,  --> </g> </g> </g> </g>

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

जैसा कि हम देख सकते हैं, प्रत्येक <g> टैग में वस्तुओं का एक समूह होता है जिसे अन्य समूहों में रखा जा सकता है। बेशक, एसवीजी के निर्माण के दौरान, प्रत्येक ऑब्जेक्ट या समूह को एक आईडी आवंटित करना आवश्यक नहीं है, यह केवल सीएसएस और जावास्क्रिप्ट के साथ काम करते समय एसवीजी का उपयोग करना आसान बनाने के लिए किया जाता है।

जावास्क्रिप्ट का उपयोग करके HTML में SVG लोड हो रहा है

एचटीएमएल

HTML के अंदर SVG को एम्बेड करने के कई तरीके हैं। यह <img>, <एम्बेड> टैग, या यहां तक कि CSS संपत्ति "पृष्ठभूमि-छवि" का उपयोग करके किया जा सकता है।

सबसे पहले, हम अपने HTML डॉक्यूमेंट के अंदर एक div बनाएंगे:

 <div id="stage"> <!--      --> </div>

जावास्क्रिप्ट

फिर, jQuery.load का उपयोग करते हुए, हम SVG फ़ाइल को #stage div में लोड करते हैं और इसे svgLoaded वर्ग को असाइन करते हैं, जिसे हम बाद में एनीमेशन के लिए उपयोग करेंगे:

 $(function(){ $("#stage").load('interactive.svg',function(response){ $(this).addClass("svgLoaded"); if(!response){ //    SVG! } }); });

महत्वपूर्ण: हम फ़ाइल के HTML सामग्री तक पहुंचने के लिए जावास्क्रिप्ट का उपयोग करके एसवीजी फ़ाइल लोड करते हैं। Chrome (और संभवतः अन्य ब्राउज़र) इसे स्थानीय रूप से अनुमति नहीं देगा; यह केवल सुरक्षा कारणों के लिए HTTP प्रोटोकॉल का उपयोग करते समय काम करता है। इस प्रकार, यदि आपको एसवीजी फ़ाइल डाउनलोड करने में समस्या है, तो सुनिश्चित करें कि आप वेब सर्वर या लोकलहोस्ट से परीक्षण कर रहे हैं

सीएसएस

कृपया ध्यान दें कि इस ट्यूटोरियल में CSS में कुछ ब्राउज़रों के लिए कोई स्टाइल नहीं होगी, हालाँकि आप उन्हें स्रोत में पा सकते हैं।

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

 #stage { width: 1024px; height: 1386px; }

एसवीजी तत्वों को स्टाइल करें: ट्रांसफॉर्म-मूल पैरामीटर असाइन करें

एसवीजी के भीतर एक तत्व को एनिमेट करने की कुंजी परिवर्तन-मूल पैरामीटर में निहित है। डिफ़ॉल्ट रूप से, सभी परिवर्तन बिंदु (0px, 0px) पर शुरू होते हैं। प्रत्येक तत्व के लिए जिसे हम रूपांतरित करेंगे (उदाहरण के लिए, घुमाएँ या पैमाने पर), हमें एसवीजी के ऊपरी बाएँ कोने के सापेक्ष परिवर्तन-मूल पैरामीटर को असाइन करना होगा।

 #coffee { transform-origin: 517px 484px; } #coffee-badge { transform-origin: 445px 488px; } #coffee-title { transform-origin: 310px 396px; } #coffee-details { transform-origin: 311px 489px; } #design { transform-origin: 514px 603px; } #design-badge { transform-origin: 580px 606px; } #design-title { transform-origin: 712px 513px; } #design-details { transform-origin: 710px 620px; } #build { transform-origin: 511px 769px; } #build-badge { transform-origin: 445px 775px; } #build-title { transform-origin: 312px 680px; } #build-details { transform-origin: 310px 790px; } #complain { transform-origin: 512px 1002px; } #complain-badge { transform-origin: 586px 1000px; } #complain-title { transform-origin: 718px 921px; } #complain-details { transform-origin: 717px 1021px; } #beer { transform-origin: 513px 1199px; } #beer-badge { transform-origin: 444px 1193px; } #beer-title { transform-origin: 313px 1097px; } #beer-details { transform-origin: 316px 1202px; }

प्रारंभिक परिवर्तन लागू करें

 [id$=badge] { /*    id,   "badge" */ transform: scale(0.5, 0.5); } [id$=title] { transform: scale(1.8) translate(0px, 48px); } [id$=details] { transform: scale(0, 0); }

जोड़ें: होवर करें और संक्रमण लागू करें

 #timeline > g:hover [id$=badge], #timeline > g:hover [id$=details] { transform: scale(1, 1); } #timeline > g:hover [id$=title] { transform: scale(1) translate(0px, 0px); } [id$=badge], [id$=title], [id$=details] { transition: transform 0.25s ease-in-out; }

इंट्रो एनीमेशन

 @keyframes left-brace-intro { 0% { transform: translateX(220px); opacity: 0; } 50% { opacity: 1; transform: translateX(220px); } 100% { transform: translateX(0px); } } @keyframes right-brace-intro { 0% { transform: translateX(-220px); opacity: 0; } 50% { opacity: 1; transform: translateX(-220px); } 100% { transform: translateX(0px); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes grow-y { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @keyframes grow-x { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes grow { 0% { transform: scale(0, 0); } 100% { transform: scale(1, 1); } }

एक एनिमेटेड परिचय अनुक्रम बनाना

 .svgLoaded #logo { animation: fade-in 0.5s ease-in-out; } .svgLoaded #quote-text { animation: fade-in 0.5s ease-in-out 0.75s; animation-fill-mode: backwards; } .svgLoaded #quote-left-brace { animation: left-brace-intro 1s ease-in-out 0.25s; animation-fill-mode: backwards; } .svgLoaded #quote-right-brace { animation: right-brace-intro 1s ease-in-out 0.25s; animation-fill-mode: backwards; } .svgLoaded #background { animation: grow-y 0.5s ease-in-out 1.25s; transform-origin: 512px 300px; animation-fill-mode: backwards; } .svgLoaded #background > g { animation: grow-x 0.25s ease-in-out 1.75s; animation-fill-mode: backwards; } .svgLoaded #background > g:last-of-type { transform-origin: 458px 877px; } .svgLoaded #background > g:first-of-type { transform-origin: 563px 877px; } .svgLoaded #coffee, .svgLoaded #design, .svgLoaded #build, .svgLoaded #complain, .svgLoaded #beer { animation: grow 0.25s ease-in-out; animation-fill-mode: backwards; } .svgLoaded #coffee { animation-delay: 2s; } .svgLoaded #design { animation-delay: 2.25s; } .svgLoaded #build { animation-delay: 2.5s; } .svgLoaded #complain { animation-delay: 2.75s; } .svgLoaded #beer { animation-delay: 3s; }

वेब फ़ॉन्ट

चूंकि हमने कस्टम फोंट का उपयोग किया है, इसलिए हमें उन्हें सही ढंग से प्रदर्शित करने के लिए अपने वेब पेज में शामिल करना होगा। ऐसा करने के लिए, आपको एसवीजी फ़ाइल के अंदर फ़ॉन्ट नाम निर्दिष्ट करना होगा:

 <!-- ... --> <text font-family="'LeagueGothic'" font-size="28">12PM</text> <!-- ... -->

जैसा कि हम देख सकते हैं, एसवीजी फ़ाइल फ़ॉन्ट 'लीगगॉथिक' का उपयोग करके बनाई गई थी, जिसका नाम हम बस सीएसएस में कॉपी करते हैं।

 @font-face { font-family: 'LeagueGothic'; url("../fonts/league-gothic/league-gothic.eot.woff") format("woff"); }

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

डाउनलोड के स्रोत | डेमो देखें

अनुवादक से। अनुवाद के बारे में सभी इच्छाओं और टिप्पणियों के साथ, कृपया मुझे पीएम से संपर्क करें। धन्यवाद!

सीएसएस और एसवीजी एनिमेशन के साथ इंटरैक्टिव इन्फोग्राफिक।