सीएसएस एनिमेशन

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

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

एनिमेशन क्या हैं?

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

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

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

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

एनिमेशन प्रकार

एनीमेशन के विभिन्न प्रकार हैं:

कार्टून या पारंपरिक एनिमेशन

इस शैली में नायक को फ्रेम दर फ्रेम गति प्रदान करना शामिल है। शुरुआत में, जब पर्याप्त दृश्य-श्रव्य साधन नहीं थे, तो उन्हें प्रत्येक फ्रेम की ड्राइंग और पेंटिंग (एनीमेशन की पृष्ठभूमि, मंच या पृष्ठभूमि सहित) के माध्यम से किया जाता था, जिसे बाद में हम फिल्म टेप के रूप में जानते हैं।

गति रोको

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

पिक्सेलेशन

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

रोटोस्कोपी

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

कटआउट या कट आउट एनिमेशन द्वारा एनिमेशन

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

3D एनीमेशन

3D एनिमेशन एक संपादक प्रोग्राम से उत्पन्न होता है, जो सिमुलेशन और एनिमेशन को करने की अनुमति देता है। इन दो वेरिएंट्स के अंदर अच्छी लाइटिंग, कैमरा मूवमेंट और स्पेशल इफेक्ट कॉन्टैक्ट में आते हैं।

वर्तमान में अन्य तकनीकें भी हैं जैसे: कांच पर पेंटिंग, रेत का एनीमेशन, गुजों की स्क्रीन और सेल्युलाइड पर पेंटिंग। 

सीएसएस क्या है?

अब जब आप एनिमेशन की दुनिया के बारे में कुछ और जान गए हैं, तो अब समय आ गया है कि हम आपको CSS के संक्षिप्तीकरण की दुनिया से परिचित कराएं।

खड़ा सीएसएस, "कैस्केडिंग स्टाइल शीट" देखें। यह एक ऐसी भाषा द्वारा बनाई गई है जिसका उपयोग डिज़ाइन क्षेत्र में और वेब पेजों की प्रस्तुति में किया जाता है, और भी बेहतर, वे टूल और कमांड की एक श्रृंखला है जो वेब पेज को प्रस्तुत करने के प्रभारी होते हैं जैसा कि हम इसे पहली बार देखते हैं। यह पहले ही बनाया जा चुका है। उपकरण के साथ मिलकर काम करता है एचटीएमएल (पृष्ठों की मूल सामग्री से व्यवस्थित)।

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

सीएसएस किसके लिए है?

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

आम तौर पर, ताकि आप बेहतर ढंग से समझ सकें कि यह टूल किस बारे में है, डिजिटल मार्केटिंग विशेषज्ञ इस बारे में सबसे पहले समझते हैं क्योंकि वे ही उन्हें संभालते हैं।

सीएसएस में चेतन

खैर, अब जब आप एनिमेशन और CSS की दुनिया के बारे में थोड़ा जान गए हैं। यह ट्यूटोरियल शुरू करने का समय है।

सीएसएस एनिमेशन आपको एक सीएसएस शैली और दूसरे के बीच संक्रमण को चेतन करने की अनुमति देता है। इन एनिमेशन में दो घटक होते हैं: a शैली जो सीएसएस एनीमेशन और के एक सेट का वर्णन करता है फ्रेम्स जो इसकी प्रारंभिक और अंतिम स्थिति के साथ-साथ इसमें संभावित मध्यवर्ती बिंदुओं को इंगित करता है।

इनमें से प्रत्येक एनिमेशन के कई फायदे हैं:

• सरल एनिमेशन के लिए इसका उपयोग बहुत आसान है, आप इसे जावास्क्रिप्ट के ज्ञान के बिना भी कर सकते हैं।
• कम-शक्ति वाले कंप्यूटरों पर भी एनिमेशन सही ढंग से प्रदर्शित होता है।
• एक ब्राउज़र द्वारा नियंत्रित होने के कारण, यह अपने प्रदर्शन और दक्षता को अनुकूलित करने की अनुमति देता है, इस प्रकार आवृत्ति को कम करता है और टैब को इस तरह से निष्पादित करता है कि वे दिखाई नहीं दे रहे हैं।

एनिमेशन सेटिंग्स

एक एनीमेशन शुरू करने के लिए, सबसे पहले हमें इसे कॉन्फ़िगर करना होगा। ऐसा करने के लिए, हम संपत्ति में जाएंगे एनीमेशन और इसके उप-गुणों के लिए। यह उपकरण हमें एनीमेशन की लय और अवधि दोनों को कॉन्फ़िगर करने की अनुमति देगा और यहां तक ​​कि इसके अनुक्रम को भी नहीं।

उप-गुण हैं:

एनिमेशन - देरी

तत्व लोड होने के क्षण और एनीमेशन अनुक्रम की शुरुआत के बीच देरी का समय।

एनिमेशन - दिशा

इंगित करता है कि क्या एनीमेशन को अनुक्रम के अंत में प्रारंभ फ्रेम में वापस करना चाहिए या क्या इसे शुरुआत से अंत में शुरू करना चाहिए।

एनिमेशन - अवधि

एनीमेशन को अपना चक्र पूरा करने में लगने वाले समय (अवधि) को इंगित करता है

एनिमेशन - पुनरावृत्ति - गिनती

जितनी बार इसे दोहराया जाता है। हम संकेत कर सकते हैं अनंत एनीमेशन को अनिश्चित काल तक दोहराने के लिए।

एनिमेशन - नाम

इसका उपयोग उस नाम को निर्दिष्ट करने के लिए किया जाता है जो एनीमेशन के प्रत्येक फ्रेम का वर्णन करता है।

एनिमेशन - प्ले - स्टेट

आपको एनीमेशन अनुक्रम को रोकने और फिर से शुरू करने में सक्षम होने की अनुमति देता है।

एनिमेशन - टाइमिंग- फंक्शन

यह एनीमेशन की लय को इंगित करता है, अर्थात एनीमेशन फ्रेम को कैसे दिखाया जाता है, इसके लिए त्वरण वक्र स्थापित किए जाते हैं।

एनिमेशन - भरण - मोड

निर्दिष्ट करता है कि एनीमेशन समाप्त होने के बाद गुणों का क्या मूल्य होगा।

फ़्रेम के साथ अनुक्रम सेट करें

एक बार जब हम समय, नामकरण आदि को कॉन्फ़िगर कर लेते हैं। यह हमारे एनिमेशन को एक नज़र या अनुभव देने का समय है।

ऐसा करने के लिए, हम दो नए फ्रेम स्थापित करेंगे और नियम का उपयोग करेंगे @कीफ़्रेम. इसके साथ, प्रत्येक फ्रेम वर्णन करता है कि एनीमेशन अनुक्रम के दौरान प्रत्येक तत्व कैसे पाया जाता है।

इंगित करने के लिए समय और लय, फ्रेम का उपयोग करता है प्रतिशतता और से और करने के लिएइसके लिए धन्यवाद, हम संकेत कर सकते हैं कि शुरुआत 0% के साथ होती है और अंत 100% के साथ होता है।

फ़्रेम और टेक्स्ट एनिमेशन

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

75% फ़ॉन्ट - आकार: 300%; मार्जिन - बाएं: 25%; चौड़ाई: 150%;

इस कोड के साथ, हम ब्राउज़र को सुझाव देते हैं कि 75% अनुक्रम में, शीर्षलेख में 25% का बायां मार्जिन और 200% की चौड़ाई के साथ 150% का आकार है।

एनिमेशन रिपीट

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

निष्कर्ष

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

क्या आपने पहले ही हिम्मत कर ली है?