विषय
CSS3 के एनिमेशन और ट्रांज़िशन दोनों को मिलाकर, हम टाइमलाइन इन्फोग्राफिक को चेतन करने के लिए CSS का उपयोग करेंगे। जब आप टाइमलाइन को नीचे स्क्रॉल करते हैं तो डेटा प्रकट होने के लिए, प्रत्येक एनीमेशन को इनव्यू jQuery प्लगइन के माध्यम से ट्रिगर किया जाता है जब यह दृश्य में आता है। हम टाइमलाइन में प्रत्येक वर्ष लागू होने वाले तीन मुख्य एनिमेशन के घटकों को देखेंगे।
हर इन्फोग्राफिक एक कहानी कहता है। मैंने इस कहानी को चुना कि कैसे वेब डिज़ाइन दिवस, मेरे द्वारा चलाया जाने वाला सम्मेलन, मेरे इन्फोग्राफिक के लिए पिछले चार वर्षों में विकसित हुआ है। यह वह डेटा है जिसका उपयोग हम अपने उदाहरण प्रोजेक्ट में करेंगे।
ट्यूटोरियल में कोड स्निपेट आसान पढ़ने के लिए सभी CSS3 गुणों के लिए बिना उपसर्ग वाले W3C सिंटैक्स को दिखाते हैं। उदाहरण फ़ाइलों में अंतिम सीएसएस में ऑटोप्रिफ़िक्सर के लिए सभी आवश्यक उपसर्ग हैं। यह भी ध्यान दें कि डेमो फ़ाइलों को सही ढंग से निष्पादित करने के लिए वेब सर्वर (एमएएमपी जैसी किसी चीज़ के माध्यम से स्थानीय, या आपके वेब होस्ट तक एफ़टीपीड) पर चलाने की आवश्यकता है।
किसी भी एनिमेशन को कोड करने से पहले, विचार करें कि सबसे दिलचस्प डेटा क्या है और समग्र रूप से आप जो अनुभव प्राप्त करना चाहते हैं। वेब डिज़ाइन दिवस के लिए, उपस्थित लोगों की कुल संख्या, साथ ही किसी एक सहभागी द्वारा भाग लेने के लिए यात्रा की गई सबसे दूर की दूरी, तुलना करने के लिए दिलचस्प बिंदु थे। उपभोग किए गए हॉट डॉग की संख्या जैसी चीज़ों को दर्शाने वाले बार चार्ट मज़ेदार हैं। कहानी विषय में हल्की है, इसलिए डिजाइन में रंग उज्ज्वल और चंचल हैं, पूरे समय एक सुसंगत शैली बनाए रखते हैं।
जैसे-जैसे हम हर साल स्क्रॉल करते हैं, समयरेखा पर एक बिंदु को चिह्नित करने के लिए तारीख दिखाई देती है। इन्हें गति में लाने के लिए, हम कीफ़्रेम का एक सेट लिखकर शुरू करते हैं जो उस एनीमेशन का वर्णन करता है जिसे हम देखना चाहते हैं। कुछ परीक्षण और त्रुटि और कोडपेन पर खेलने के बाद, मैं इस पर पहुंचा:
@कीफ्रेम पॉपइन { 0% {ट्रांसफॉर्म: स्केल (0);} 70% {ट्रांसफॉर्म: स्केल (1.05);} 100% {ट्रांसफॉर्म: स्केल (1);}}
हमारी झांकना एनिमेशन a . से शुरू होता है परिवर्तन हमारे तत्व को 0 . के आकार में स्केल करना, जो अनिवार्य रूप से इसे अपना प्रवेश द्वार शुरू करने के लिए अदृश्य बना देता है। फिर, एनीमेशन के माध्यम से 70% रास्ता, हम का एक पैमाना प्रदान करते हैं 1.05, जो हमारे तत्व को उसके नियत से थोड़ा बड़ा प्रदर्शित करेगा 110px व्यास। अंत में, यह अपने वास्तविक नियत आकार, के पैमाने पर स्थिर हो जाता है 1, हमारे एनिमेशन के अंतिम कीफ़्रेम पर (100%) यह कीफ़्रेम घोषणा अपने आप कुछ भी चेतन नहीं करेगी। एनीमेशन को प्रभावी होने के लिए एक तत्व को असाइन करने की आवश्यकता है, का उपयोग कर दिनांक-एनिम-इन वर्ग:
.डेट-एनिम-इन {एनिमेशन:पॉपइन .4s क्यूबिक-बेज़ियर(0.6, -0.28, 0.735, 0.045) दोनों; }
कोई भी तत्व जिसे हम असाइन करते हैं दिनांक-एनिम-इन पर ले जाएगा करने के लिए कक्षा झांकना एनीमेशन, एनीमेशन को पूरा करने के लिए 0.4 सेकंड का समय लें, का उपयोग करें एनिमेशन-टाइमिंग-फ़ंक्शन हमारे में परिभाषित संपत्ति घन-बेज़ियर समारोह और एक है एनिमेशन-भरने-मोड का दोनों.
ध्यान दें कि हमारे HTML में हमने केवल का वर्ग निर्दिष्ट किया है ।तारीख हमारे वर्ष मार्कर के लिए, नहीं दिनांक-एनिम-इन वर्ग जो हमने अभी बनाया है। हम असाइन करेंगे दिनांक-एनिम-इन ठीक से नियंत्रित करने के लिए गतिशील रूप से jQuery का उपयोग करना जब झांकना एनिमेशन निष्पादित करता है। कोई अतिरिक्त सीएसएस लिखे बिना, हम अन्य दिनांक मार्करों, या यहां तक कि अन्य तत्वों को पूरी तरह से चेतन करने के लिए इसका पुन: उपयोग करने में सक्षम होंगे यदि हम चाहते हैं। हमारा दिनांक एनीमेशन सेट है और उपयोग के लिए तैयार है!
बार चार्ट एनिमेशन
हमारा बार चार्ट प्रत्येक वर्ष दोपहर के भोजन में खाए जाने वाले वेजी डॉग, हॉट डॉग और पिरोगी की संख्या को दर्शाता है। चौड़ाई प्रत्येक बार की कुल लंबाई को एनिमेट किया जाता है, जबकि प्रत्येक बार के लिए सचित्र लेबल बार के विस्तार के रूप में फीका पड़ जाता है। सीएसएस संक्रमण और कुछ चतुर घोंसले के साथ विस्तार की गति हासिल की जाती है। लुप्त होती के लिए एक CSS एनीमेशन का उपयोग किया जाता है। इस एनीमेशन में सब कुछ थोड़ा बहुत चल रहा है!
सबसे पहले, हमारे बार चार्ट के प्रत्येक बार के लिए HTML इस तरह संरचित है:
div > div >/div> div >span>24/span>br/>img src="img/vegdog.svg" alt="veggie dog"/>/div> /div>
प्रत्येक खाद्य पदार्थ में एक होता है डिव> जो बार चार्ट के साथ-साथ a डिव> इसके लेबल के साथ। एक अतिरिक्त है अवधि> प्रत्येक आइटम के लिए कुल संख्या के आसपास ताकि हम बाद में प्रत्येक बार को चौड़ाई निर्दिष्ट करने के लिए jQuery के साथ इसे आसानी से खींच सकें। यह उस एनीमेशन को बनाए रखने में मदद करता है जिसे हम प्रत्येक वर्ष के बार चार्ट में पुन: प्रयोज्य बना रहे हैं। प्रत्येक चार्ट की गति के पीछे सीएसएस बिल्कुल समान है, भले ही डेटा न हो। डिव>s के वर्ग के साथ शाकाहारी, .पिएरोगी तथा भावपूर्ण चार्ट के प्रत्येक अनुभाग के लिए चौड़ाई निर्धारित करेगा। प्रत्येक बच्चा .बार डिव> की चौड़ाई असाइन की गई है 100% हमारे सीएसएस में:
.बार {चौड़ाई: 100%; ऊंचाई: 2रेम;}
अब, हम पैरेंट एलिमेंट को ट्रांज़िशन असाइन करके हमारे चार्ट में प्रत्येक बार के बढ़ने के समय को बदल सकते हैं (शाकाहारी, .पिएरोगी, तथा भावपूर्ण) अधिकतम प्रभाव के लिए, बार क्रम में विस्तार करते हैं और एक दूसरे के ऊपर बढ़ते हुए दिखाई देते हैं: पहला शाकाहारी, तब फिर .पिएरोगी, तब फिर भावपूर्ण. यह प्रत्येक को एक ट्रांज़िशन प्रॉपर्टी असाइन करके और संबंधित देरी की मात्रा को चौंकाकर हासिल किया जाता है:
.veg { जेड-इंडेक्स: 100; चौड़ाई: 0; संक्रमण: चौड़ाई .5s आसानी से;} .pierogi { z-index: ५०; चौड़ाई: 0; संक्रमण: चौड़ाई .75s आसानी से .2s;}। भावपूर्ण {चौड़ाई: 0; संक्रमण: चौड़ाई 1s आसानी से .2s;}
बार चार्ट के सभी तीन खंडों की प्रारंभिक चौड़ाई है 0 के साथ शुरू करने के लिए और एक Z- सूचकांक विज़ुअल लेयरिंग ऑर्डर को संरक्षित करने के लिए सेट करें। उदाहरण के लिए, शाकाहारी पर होने वाले संक्रमण को अस्पष्ट कर देगा .पिएरोगी जब तक कि यह से अधिक चौड़ी चौड़ाई में परिवर्तित न हो जाए .veg div> इसके ऊपर स्तरित। कंपित विस्तार प्रभाव बनाने के लिए प्रत्येक खंड में इसकी चौड़ाई के लिए थोड़ी अलग अवधि (शॉर्टहैंड में पहली संख्या) और देरी (शॉर्टहैंड में दूसरी संख्या) के साथ एक संक्रमण भी होता है। जब इनमें से प्रत्येक को कुल चौड़ाई दी जाती है डिव>s jQuery के माध्यम से, संक्रमण शुरू हो जाते हैं और बच्चे .बार प्रत्येक के साथ तत्व बढ़ेगा।
हमारे नेस्टेड लेबल टेक्स्ट और इमेज को एक समान तरीके से उनकी गति मिलती है। हमारी डिव> लेबल के वर्ग के साथ (पाठ और छवि दोनों युक्त) अपने मूल तत्व के दाईं ओर बिल्कुल स्थित है। जैसे ही मूल तत्व अपने संक्रमण के माध्यम से फैलता है, लेबल भी इसके साथ चलता है। यह एक कड़ी मेहनत वाला संक्रमण है!
बस एक और चीज है जिसे मैं विस्तारित बार चार्ट एनीमेशन में जोड़ना चाहता था। एनीमेशन की शुरुआत के करीब लेबल की छवियों और पाठ को अजीब तरह से एक दूसरे के ऊपर ढेर करना वास्तव में विचलित करने वाला था, जब सभी तीन बार लगभग समान चौड़ाई के थे। लेबल ओवरलैप हो गए और जब तक सलाखों का थोड़ा विस्तार नहीं हुआ, तब तक वे विकृत दिख रहे थे। दृश्य ओवरलैप को कम करने में मदद करने के लिए, मैंने बार के विस्तार के दौरान प्रत्येक लेबल में फीका करने के लिए एक एनीमेशन जोड़ा।
फ़ेडअप एनिमेशन के कीफ़्रेम 0 की अपारदर्शिता से शुरू होते हैं और . की अस्पष्टता पर समाप्त होते हैं 1. इस एनीमेशन को विभिन्न कॉन्फ़िगरेशन में असाइन करने के लिए हमारे पास चार अलग-अलग वर्ग भी तैयार हैं। (हम इन कक्षाओं का उपयोग उसी तरह से करेंगे जैसे दिनांक-एनिम-इन कक्षा पहले चर्चा की।)
@keyframes fadeUp { से {अपारदर्शिता: 0;} से {अपारदर्शिता: 1;}}। फेड-डाउन {एनीमेशन: फेडअप .15s ईज-आउट रिवर्स दोनों; } .food1 .label { एनिमेशन: फ़ेडअप 0.5s ईजी-आउट 0.75s दोनों; } .food2 .label { ऐनिमेशन: फ़ेडअप 0.5s ईज़ी-आउट 1s दोनों; } .food3 .label {एनिमेशन: फेडअप 0.5s ईजी-आउट 1.25s दोनों; }
फीका पड़ना क्लास पहली बार में थोड़ी फनी लग सकती है। हम का एनीमेशन असाइन कर रहे हैं धुंधला हो जाना लेकिन यह भी स्थापित कर रहा है एनिमेशन-दिशा आशुलिपि के माध्यम से रिवर्स करने के लिए संपत्ति। यह कीफ़्रेम को उनके सूचीबद्ध किए गए विपरीत क्रम में निष्पादित करेगा (अपारदर्शिता 1 की अस्पष्टता के लिए 0) इसलिए, हम कीफ़्रेम के इस एक सेट का उपयोग तत्वों को अंदर या बाहर फीका करने के लिए कर सकते हैं, जो इस पर निर्भर करता है एनिमेशन-दिशा हमलोग तैयार हैं। वह सब कुछ नहीं हैं! हम अपने बार चार्ट लेबल के लुप्त होने के लिए उपयोग करने के लिए तीन अतिरिक्त कक्षाएं बनाते हैं। हम वही इस्तेमाल करते हैं धुंधला हो जाना प्रत्येक पर keyframes, लेकिन एक अलग के साथ एनिमेशन-देरी प्रत्येक के लिए मूल्य।
जब हम असाइन करते हैं भोजन1food, .भोजन2 तथा भोजन3food jQuery के माध्यम से कक्षाएं, प्रत्येक के भीतर के लेबल हमारे को सौंपे जाएंगे धुंधला हो जाना देरी की चौंका देने वाली मात्रा के साथ एनीमेशन। हम उन्हें एक-एक करके फीके होते देखेंगे। एनीमेशन गुणों के विभिन्न विन्यास बनाकर, आप एकल कीफ़्रेम घोषणा से बहुत अधिक लाभ प्राप्त कर सकते हैं। यह पुन: प्रयोज्यता मेरी पसंदीदा सीएसएस एनीमेशन सुविधाओं में से एक है।
सम्मेलन में नशे में कॉफी की मात्रा इस इन्फोग्राफिक में नाटकीय रूप से प्रदर्शित करने के लिए भीख माँग रही थी। प्रत्येक कॉफी कप की छवि दो कप कॉफी का प्रतिनिधित्व करती है जो चीजों को अत्यधिक दृष्टि से भारी होने से रोकने के लिए खपत होती है। कॉफी के कप थोड़े वसंत के साथ अपने स्थान पर आ जाते हैं और समय के साथ कंपित दिखाई देते हैं। हम इसे एनिमेटेड 3D ट्रांसफ़ॉर्म और मुट्ठी भर के साथ पूरा करते हैं nth-of-type नियम।
कॉफ़ी कप को 3D स्पेस में घुमाने के लिए, हम उन्हें y-अक्ष के चारों ओर घुमाएंगे। एचटीएमएल तत्वों में कोई गहराई नहीं है, इसलिए कप अनिवार्य रूप से अंतरिक्ष में पोस्टकार्ड हैं: उनके पास आगे और पीछे है, लेकिन अगर हम उन्हें किनारे से देखते हैं, तो वे अनिवार्य रूप से अदृश्य हैं क्योंकि वे असीम रूप से पतले हैं। हमारे एनिमेशन के लिए मुख्य-फ़्रेम इस तरह दिखते हैं:
@keyframes स्विंगइन { 0% {रूपांतरण: घुमाएँ (९० डिग्री); एनिमेशन-टाइमिंग-फ़ंक्शन: क्यूबिक-बेज़ियर (0.895, 0.03, 0.685, 0.22);} 5% { अस्पष्टता: .5; एनिमेशन-टाइमिंग-फ़ंक्शन: रैखिक;} 60% {रूपांतरण: रोटेटवाई (-20 डिग्री); एनिमेशन-टाइमिंग-फ़ंक्शन: क्यूबिक-बेज़ियर (०.१६५, ०.८४, ०.४४, १);} १००% {अस्पष्टता: १; ट्रांसफॉर्म: रोटेट वाई (0 डिग्री);}}
हम भी सेट करते हैं परिप्रेक्ष्य हमारे मूल तत्व पर संपत्ति यह सुनिश्चित करने के लिए कि हमारे सभी कॉफी कप एक ही परिप्रेक्ष्य का उपयोग करके घूम रहे हैं:
उल कप { परिप्रेक्ष्य: ८००; … }
इस एनीमेशन के दौरान, कॉफी कप की अस्पष्टता और रोटेशन दोनों अलग-अलग दरों पर प्रभावित होते हैं। यह y-अक्ष के चारों ओर 90-डिग्री रोटेशन के साथ शुरू होता है, जिसका अर्थ है कि हमारी कागज़-पतली छवि घुमाई गई है और इसे देखा नहीं जा सकता है। यह 0 डिग्री के रोटेशन के साथ समाप्त होता है, जिसका अर्थ है कि यह स्क्रीन पर सपाट है। यह अपनी अंतिम स्थिति के पीछे घूमता है ताकि थोड़ा सा उछाल वापस जगह पर आ जाए।
एनिमेशन-टाइमिंग-फ़ंक्शन आंदोलन की 'तड़क-भड़क' को अधिकतम करने के लिए कीफ़्रेम के बीच अलग-अलग सेट किया जाता है। आप चेतन नहीं कर सकते एनिमेशन-टाइमिंग-फ़ंक्शन संपत्ति, लेकिन आप इसे कीफ्रेम के बीच अलग-अलग मानों पर सेट कर सकते हैं जैसा कि हमारे यहां है। एनिमेशन-टाइमिंग-फ़ंक्शन हमारे में परिभाषित 0% के बीच कीफ़्रेम का उपयोग किया जाएगा 0% तथा 5% प्रत्येक नए के रूप में हमारे keyframes के माध्यम से keyframes और इतने पर एनिमेशन-टाइमिंग-फ़ंक्शन संपत्ति को कीफ़्रेम नियम के अंतर्गत घोषित किया जाता है।
के समान धुंधला हो जाना बार चार्ट लेबल के लिए एनीमेशन, कॉफी कप के लिए एनीमेशन को सौंपा गया है ली>प्रत्येक सूची में s, कई वर्गों का उपयोग करते हुए। इस मामले में, चूंकि कॉफी कपों की कुल संख्या इतनी अधिक भिन्न होती है, :nth-of-type छद्म वर्ग चयनकर्ता का उपयोग अलग-अलग असाइन करने के लिए किया जाता है एनिमेशन-देरी कॉफी कप के लिए संपत्ति मूल्य ली>१० के समूहों में। जैसे ही कॉफी कप सूची देखने में आती है, प्रत्येक ली> की कक्षा सौंपी जाएगी .स्विंग-इन jQuery के माध्यम से। :nth-of-type हमारे सीएसएस में नियम प्रत्येक व्यक्तिगत कॉफी कप को सौंपे गए एनीमेशन गुणों को निर्धारित करेंगे ली>:
.swing-in:nth-of-type(2n+1) { एनिमेशन: स्विंगइन 0.9s 0.75s; }
ये वर्ग उपयोग करते हैं .स्विंग-इन तत्वों को लेने के लिए एक आदेश निर्धारित करने के लिए वर्ग स्विंगइन एनिमेशन। तत्वों के लिए अलग-अलग मूल्य भी होते हैं एनिमेशन-देरी संपत्ति (आशुलिपि में दूसरा नंबर)। ये एक-दूसरे को ओवरराइड करते हैं, जिससे कॉफी कप 10 के समूहों में चेतन हो जाते हैं, एनीमेशन को लगभग धारीदार रूप देते हैं क्योंकि कप सभी एक वर्ग को निर्दिष्ट करने से दिखाई देते हैं। मैंने इन नियमों को की वृद्धिशील मात्रा के साथ बनाने के लिए एक Sass लूप का उपयोग किया एनिमेशन-देरी. अब आइए जावास्क्रिप्ट पर एक नज़र डालते हैं जो हमारे इन्फोग्राफिक में हमारे सभी सीएसएस एनिमेशन और ट्रांज़िशन के लिए लॉजिक और प्लेइंग कंडक्टर का ख्याल रखता है।
एनिमेशन को ट्रिगर करना
हमारे प्रत्येक एनिमेशन को ट्रिगर करने की आवश्यकता है क्योंकि यह इस बात पर आधारित है कि हमने पृष्ठ को कितनी दूर स्क्रॉल किया है। कई पुस्तकालय और स्क्रिप्ट हैं जो हमें इस तरह की जानकारी दे सकती हैं। मैंने इनव्यू jQuery प्लग-इन का उपयोग करना चुना है। जब भी कोई विशेष तत्व दृश्यमान व्यूपोर्ट क्षेत्र में होता है तो यह प्लग-इन किसी ईवेंट को सक्रिय कर सकता है। उस घटना का उपयोग करते हुए, मैं अपने एनीमेशन गुणों वाले सीएसएस वर्गों को असाइन करता हूं जब प्रश्न में तत्व दिखाई देता है और फिर इसे हटा देता है जब यह नहीं होता है। CSS एनिमेशन तब निष्पादित होते हैं जब उन्हें असाइन किया जाता है। इसलिए, इस तरह से एनीमेशन गुणों के साथ एक वर्ग को जोड़ना और हटाना अनिवार्य रूप से हर बार जोड़े जाने पर एक एनीमेशन को फिर से ट्रिगर करता है। ठीक यही मैं यहाँ करना चाहता हूँ। याद रखें हमारा दिनांक-एनिम-इन कक्षा जिसमें एनीमेशन गुण थे, हम चाहते थे कि हमारे दिनांक मार्कर उपयोग करें? हम इसे प्रत्येक वर्ष के मार्कर को असाइन कर सकते हैं क्योंकि यह ध्यान में आता है, जैसे:
$(.date").bind('inview', function(event,visible,visiblePartX,visiblePartY) {if (visible) {$(this).addClass('date-anim-in'); } और { $ (यह).removeClass('date-anim-in'); } });
इनव्यू प्लग-इन का उपयोग करते हुए, हम खोजते हैं a डिव> के वर्ग के साथ ।तारीख और जोड़ें दिनांक-एनिम-इन क्लास जब इसे दृश्यमान के रूप में फ़्लैग किया जाता है। जब जोड़ा जाता है, तो संबंधित एनीमेशन गुण लागू होते हैं और हमारे दिनांक मार्कर के साथ एनिमेट होता है झांकना एनिमेशन। जब यह दिखाई नहीं दे रहा है, दिनांक-एनिम-इन वर्ग हटा दिया जाता है। .दिनांक div> अपनी आंतरिक शैलियों में वापस आ गया है और हम फिर से असाइन करने के लिए तैयार हैं दिनांक-एनिम-इन कक्षा जब यह वापस देखने में आता है। जैसे-जैसे हम समयरेखा को नीचे स्क्रॉल करते हैं, वैसे-वैसे हमारे वर्ष चिह्नक पॉप अप होते जा रहे हैं। जबकि कॉफी कप को उसी तरह नियंत्रित किया जाता है, बार चार्ट एनिमेशन अधिक चल रहे हैं:
$(.nine .food").bind('inview', function(event,visible,visiblePartX,visiblePartY) { if (visible) { $(.nine .veg").removeClass('fade-down') .addClass('food1').css('width', $(.nine .veg .label span").text()*2); $(.nine .pierogi").removeClass('fade- down').addClass('food2').css('width', $(.nine .pierogi .label span").text()*2); $(.nine .meaty").removeClass( 'फीका-डाउन').addClass('food3').css('width', $(.nine .meaty .label span").text()*2); }else { $(.nine . veg").toggleClass('fade-downfood1').css('width', '0px'); $(.nine .pierogi").toggleClass('fade-downfood2').css('width') , '0px'); $(.nine .meaty").toggleClass('fade-downfood3').css('width', '0px'); } });
इस मामले में, जैसा कि हमारा ।खाना प्रत्येक वर्ष के लिए अनुभाग दृश्यमान हो जाता है, हम अपने बार चार्ट में दर्शाए गए तीन खाद्य पदार्थों में से प्रत्येक में तीन परिवर्तन करते हैं। सबसे पहले, हम वर्ग को हटाते हैं फीका पड़ना इसमें से (यदि यह वहां है)। उदाहरण के लिए, यदि हम अपने इन्फोग्राफिक के माध्यम से बैक अप स्क्रॉल कर रहे थे, तो फीका पड़ना कक्षा उन चार्टों पर लागू होगी जिन्हें हम पहले ही स्क्रॉल कर चुके हैं। अगला भोजन1food (या .भोजन2 या।भोजन3) वर्ग जोड़ा गया है। यह वह वर्ग था जो हमारी चौंका देने वाली देरी से जुड़ा था धुंधला हो जाना एनिमेशन। अंत में, हम अपने खाद्य पदार्थ की चौड़ाई को उसमें लिपटे कुल संख्या के आधार पर निर्दिष्ट करते हैं अवधि> हमने पहले सेट किए गए संक्रमण को ट्रिगर करने के लिए। दूसरी ओर, जब .food अनुभाग दिखाई नहीं देता है, तो हम कक्षा असाइनमेंट को उलट देते हैं और सेट करते हैं चौड़ाई सेवा मेरे 0 ताकि यह फिर से खेलने के लिए तैयार हो, क्या इसे वापस देखना चाहिए। और इसके साथ ही, हमारा इन्फोग्राफिक पूरी तरह से एनिमेटेड है!
शब्दों: वैल हेड
यह आलेख मूल रूप से नेट पत्रिका अंक 246 में छपा था।
