CSS अॅनिमेशन

सीएसएस सादरीकरण

स्रोत: ऑनलाइन कार्यक्रम

असे बरेच प्रोग्राम आहेत जिथे तुम्ही संपादित करू शकता, मॉन्टेज तयार करू शकता किंवा अगदी तयार करू शकता अ‍ॅनिमेशन, प्रत्येक वेळी असे अनेक सॉफ्टवेअर असतात जे या प्रकारचे परस्परसंवादी प्रकल्प जोडतात. या पोस्टमध्ये आम्ही तुम्हाला केवळ अॅनिमेशनच्या जगाची ओळख करून देणार नाही, तर एका नवीन मित्राचीही ओळख करून देणार आहोत.

तुम्हाला माहिती आहेच की, संगणक जगामध्ये वेब पेजेस किंवा ऑनलाइन मीडियाच्या विकासासाठी कमांड्स आणि उपयुक्त साधनांनी भरलेले आहे, जे सध्या एकत्र आहेत. आमच्यासोबत रहा आणि या नवीन ट्युटोरियलमध्ये संगणकीय आणि परस्परसंवादाने तुमचा स्तर वाढवण्याचा आणखी एक मार्ग शोधा.

अॅनिमेशन म्हणजे काय?

अॅनिमेशनचे जग

स्रोत: सर्व गेमर्स

आपण ट्यूटोरियलमध्ये पूर्णपणे प्रवेश करावा अशी आमची इच्छा आहे, परंतु यासाठी, अॅनिमेशनच्या जगात किंवा ग्राफिक डिझाइनच्या जगात प्रवेश करणे आवश्यक आहे. परस्परसंवादी डिझाइन. 

अॅनिमेशन देखील दृकश्राव्य जगाचा एक भाग आहेत, खरेतर ते काहीही नसतील किंवा कारण त्यामध्ये ऑडिओ आणि हलणारी प्रतिमा सादर केली जाईल. या कारणास्तव, जेव्हा आपण "अॅनिमेशन" बद्दल बोलतो, तेव्हा आम्ही "कार्टून" म्हणून प्रसिद्ध असलेल्या गोष्टीचा संदर्भ देतो.

वर सारांश दिल्याप्रमाणे, अॅनिमेशन एखाद्या गोष्टीला हालचाल देण्याच्या क्षमतेपासून उद्भवते, या प्रकरणात व्यंगचित्रे. पण या सर्व हालचाली कशा साध्य होतात? बरं, निःसंशय, त्या आपण ज्याला म्हणतो त्यातून निर्माण होतात, रेखाचित्रे किंवा छायाचित्रांचे अनुक्रम की एकापाठोपाठ एक क्रमाने आदेश देऊन, ते आपल्या डोळ्यांसमोर एक विश्वासार्ह चळवळ निर्माण करण्यास व्यवस्थापित करतात, जे स्वतःला उधार देतात आणि दृश्य भ्रमाच्या खेळात प्रवेश करतात.

पूर्वी, प्रथम अॅनिमेशन कागदाच्या शीटवर डिझाइन केले गेले होते, त्या प्रत्येकामध्ये, अॅनिमेटेड वर्ण पायऱ्यांसह काढले गेले होते आणि एकदा शीटच्या शेवटी पोहोचल्यानंतर, हालचालीचा प्रभाव साध्य करण्यासाठी ते एक-एक करून द्रुतगतीने पास केले गेले. रेखाचित्र

अॅनिमेशन प्रकार

अॅनिमेशनचे विविध प्रकार आहेत:

कार्टून किंवा पारंपारिक अॅनिमेशन

या शैलीमध्ये नायक फ्रेमला फ्रेमनुसार हालचाल देणे समाविष्ट आहे. सुरुवातीला, जेव्हा पुरेशी दृकश्राव्य माध्यमे नव्हती, तेव्हा ते प्रत्येक फ्रेमच्या (पार्श्वभूमी, स्टेज किंवा अॅनिमेशनच्या पार्श्वभूमीसह) रेखाचित्र आणि पेंटिंगद्वारे केले गेले होते, जे नंतर आपल्याला फिल्म टेप म्हणून ओळखले जाते त्यावर चित्रित केले जावे.

स्टॉप मोशन

स्टॉप मोशन हे अॅनिमेशन तंत्र आहे ज्याचा कार्टूनशी काहीही संबंध नाही. शिवाय, वस्तुंच्या हालचालींचे अनुकरण करणे हे त्याचे मुख्य उद्दिष्ट आहे जे प्रत्यक्षात पूर्णपणे स्थिर आहेत आणि ते दोन टप्प्यात विभागले गेले आहे: चिकणमातीचे अॅनिमेशन किंवा क्लेमोशन आणि कठोर वस्तूंचे अॅनिमेशन.

पिक्सेलेशन

Pixelation हे एक तंत्र आहे जे Stop Motion मधून येते आणि त्यामध्ये बाहुल्या किंवा मॉडेल नसलेल्या, परंतु सामान्य वस्तू किंवा लोक नसलेल्या वस्तूंसह कार्य केले जाते. ऑब्जेक्ट्सचे अनेक वेळा छायाचित्रण केले जाते आणि प्रत्येक फ्रेमसह थोडेसे शिफ्ट केले जाते.

रोटोस्कोपी

यात दुसर्‍या रेखांकनाचे थेट रेखांकन असते, जसे की दुसर्‍या रेखांकनावर किंवा वास्तविक व्यक्तीचे चित्र काढणे. हा मोकॅपचा अग्रदूत मानला जातो, म्हणजेच मोशन कॅप्चरचा जो सिनेमाच्या जगात डिजिटल पात्रे पुन्हा तयार करण्यासाठी वापरला जातो.

कटआउट्सद्वारे अॅनिमेशन किंवा कट आउट अॅनिमेशन

हे एक तंत्र आहे ज्यामध्ये कटिंग आकृत्यांचा समावेश आहे, हे आकडे कागदावर किंवा छायाचित्रांमध्ये दर्शविले जाऊ शकतात. पात्रांचा मुख्य भाग कटआउट्सवर आधारित आहे आणि हालचाली आणि अॅनिमेशन सांगितलेल्या कटआउट्सच्या बदलीमुळे उद्भवते.

3d अॅनिमेशन

3D अॅनिमेशन एका संपादक प्रोग्राममधून उद्भवते, जे सिम्युलेशन आणि अॅनिमेशन चालवण्याची परवानगी देते. या दोन प्रकारांमध्ये, चांगली प्रकाशयोजना, कॅमेरा हालचाली आणि स्पेशल इफेक्ट्स संपर्कात येतात.

सध्या इतर तंत्रे देखील आहेत जसे की: काचेवरचे चित्र, वाळूचे अॅनिमेशन, गुजांचा पडदा आणि सेल्युलॉइडवरील चित्रकला. 

CSS म्हणजे काय?

प्रोग्रामचा Css इंटरफेस

स्रोत: वेब डिझाइन रोझारियो सत्र स्टुडिओ

आता तुम्हाला अॅनिमेशनच्या जगाबद्दल थोडे अधिक माहिती आहे, आता आम्ही तुम्हाला CSS परिवर्णी शब्दांच्या जगाशी ओळख करून देण्याची वेळ आली आहे.

एक्रोनिम CSS, "कॅस्केडिंग स्टाईल शीट्स" चा संदर्भ घ्या. हे डिझाइन सेक्टरमध्ये आणि वेब पृष्ठांच्या सादरीकरणामध्ये वापरल्या जाणार्‍या भाषेद्वारे तयार केले गेले आहे, त्याहूनही चांगले, ते वेब पृष्ठ सादर करण्यासाठी प्रभारी असलेल्या टूल्स आणि कमांड्सची मालिका आहेत जसे की आपण प्रथमच एकदा पाहतो. ते आधीच तयार केले गेले आहे. साधनासह एकत्रितपणे कार्य करते HTML (पृष्ठांच्या मूळ सामग्रीवरून आयोजित).

त्याचे नाव त्यात असलेल्या पानांच्या संख्येनुसार निर्धारित केले जाते आणि त्यापैकी एकाला इतरांकडून गुणधर्म किंवा वैशिष्ट्ये वारशाने मिळतात. म्हणजेच, तुम्ही एका साध्या ब्लॉग टेम्प्लेटसह कार्य करू शकता, परंतु जेव्हा तुम्हाला साइटचे स्वरूप सानुकूलित करायचे असेल तेव्हा तुम्हाला CSS लागू करणे आवश्यक आहे जे चांगल्या CMS सोबत तुम्हाला तुमच्या सामग्रीची पोहोच वाढविण्यात मदत करेल.

CSS कशासाठी आहे?

CSS सह, तुम्ही तुमचे पृष्ठ व्यवस्थापित करू शकता, म्हणजे, तुम्ही सर्व माहिती कशी शोधू इच्छिता हे तुम्ही तुमचे वेबपृष्ठ सांगू शकता जेणेकरुन दर्शकांना हाताळण्यास सोपे आणि त्याच वेळी उपयोगी पडेल. येथे वेब पृष्ठाच्या शैली किंवा डिझाइनचा भाग असलेल्या काही घटकांच्या सर्व आज्ञा प्रविष्ट करा, उदाहरणार्थ, द फॉन्ट, रंग, आकार इ. 

सामान्यत:, हे साधन काय आहे हे तुम्हाला अधिक चांगल्या प्रकारे समजण्यासाठी, डिजिटल मार्केटिंग तज्ञांना याबद्दल प्रथम समजले जाते कारण तेच ते हाताळतात.

CSS मध्ये अॅनिमेट करा

बरं, आता तुम्हाला अॅनिमेशन आणि CSS च्या जगाबद्दल थोडं माहिती आहे. ट्यूटोरियल सुरू करण्याची वेळ आली आहे.

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

यापैकी प्रत्येक अॅनिमेशनमध्ये अनेक फायदे आहेत:

  • साध्या अॅनिमेशनसाठी त्याचा वापर खूप सोपा आहे, तुम्ही Javascript चे ज्ञान नसतानाही ते करू शकता.
  • अॅनिमेशन अगदी कमी-शक्तीच्या संगणकांवरही योग्यरित्या प्रदर्शित होते.
  • ब्राउझरद्वारे नियंत्रित केले जात असल्याने, ते त्याचे कार्यप्रदर्शन आणि कार्यक्षमता ऑप्टिमाइझ करण्यास अनुमती देते, अशा प्रकारे वारंवारता कमी करते आणि टॅब दृश्यमान नसतील अशा प्रकारे कार्यान्वित करते.

अॅनिमेशन सेटिंग्ज

अॅनिमेशन सुरू करण्यासाठी, सर्वप्रथम आपल्याला ते कॉन्फिगर करावे लागेल. हे करण्यासाठी, आम्ही मालमत्तेवर जाऊ अॅनिमेशन आणि त्याच्या उप-गुणधर्मासाठी. हे साधन आम्हाला अॅनिमेशनची लय आणि कालावधी दोन्ही कॉन्फिगर करण्यास अनुमती देईल आणि त्याचा क्रम देखील नाही.

उप-गुणधर्म आहेत:

अॅनिमेशन - विलंब

घटक लोड होण्याच्या क्षणापासून आणि अॅनिमेशन क्रमाच्या सुरुवातीच्या दरम्यानचा विलंब वेळ.

अॅनिमेशन - दिशा

अ‍ॅनिमेशन क्रमाच्या शेवटी स्टार्ट फ्रेमवर परत जावे किंवा ते शेवटपर्यंत पोहोचल्यावर सुरुवातीपासून सुरू व्हावे की नाही हे सूचित करते.

अॅनिमेशन - कालावधी

अॅनिमेशनला त्याचे चक्र पूर्ण होण्यासाठी लागणारा वेळ (कालावधी) दर्शवते

अॅनिमेशन - पुनरावृत्ती - संख्या

ते किती वेळा पुनरावृत्ती होते. आम्ही सूचित करू शकतो असीम अनिश्चित काळासाठी अॅनिमेशनची पुनरावृत्ती करण्यासाठी.

अॅनिमेशन - नाव

हे अॅनिमेशनच्या प्रत्येक फ्रेमचे वर्णन करणारे नाव निर्दिष्ट करण्यासाठी वापरले जाते.

अॅनिमेशन - प्ले - राज्य

तुम्‍हाला अॅनिमेशन क्रम थांबवण्‍यास आणि पुन्‍हा सुरू करण्‍याची अनुमती देते.

अॅनिमेशन - वेळ - कार्य

हे अॅनिमेशनची लय दर्शवते, म्हणजेच अॅनिमेशन फ्रेम्स कशा दाखवल्या जातात, यासाठी प्रवेग वक्र स्थापित केले जातात.

अॅनिमेशन - भरा - मोड

अॅनिमेशन संपल्यानंतर गुणधर्मांमध्ये कोणती मूल्ये असतील ते निर्दिष्ट करते.

फ्रेम्ससह क्रम सेट करा

एकदा आम्ही वेळ, नामांकन इ. कॉन्फिगर केले. आमच्या अॅनिमेशनला एक लुक किंवा अनुभव देण्याची ही वेळ आहे.

हे करण्यासाठी, आम्ही दोन नवीन फ्रेम स्थापित करू आणि नियम वापरू कीफ्रेम्स. यासह, प्रत्येक फ्रेम अॅनिमेशन क्रमादरम्यान प्रत्येक घटक कसा सापडतो याचे वर्णन करते.

सूचित करण्यासाठी वेळ आणि ताल, फ्रेम वापरते टक्केवारी आणि सह पासून आणि पर्यंतयाबद्दल धन्यवाद, सुरुवात 0% ने कधी होते आणि 100% सह समाप्त होते हे आम्ही सूचित करू शकतो.

फ्रेम आणि मजकूर अॅनिमेशन

अधिक फ्रेम्स जोडण्यासाठी आणि मजकूरासह त्यांना अॅनिमेट करण्यासाठी, तुम्हाला हेडर फॉन्टचा मोठा आकार लागू करणे आवश्यक आहे जेणेकरून हेडर ठराविक वेळेसाठी हलते तेव्हा वाढेल आणि नंतर त्याच्या मूळ आकारात कमी होईल. यासाठी आम्ही खालील कोड स्थापित करणार आहोत:

75% फॉन्ट - आकार: 300%; margn - डावीकडे: 25%; रुंदी: 150%;

या कोडसह, आम्ही ब्राउझरला सुचवितो की अनुक्रमाच्या 75% मध्ये, शीर्षलेखाचा डावा मार्जिन 25% आहे आणि 200% रुंदीचा आकार 150% आहे.

अॅनिमेशनची पुनरावृत्ती

अॅनिमेशन पुनरावृत्ती करण्यासाठी, खालील गुणधर्म वापरणे आवश्यक आहे अॅनिमेशन - पुनरावृत्ती - संख्या आणि आम्ही ते किती वेळा पुनरावृत्ती करू इच्छितो हे सूचित केले पाहिजे. आपण देखील वापरू शकतो असीम जेणेकरून ते नेहमी पुनरावृत्ती होते.

निष्कर्ष

तुम्ही पाहिल्याप्रमाणे, CSS मध्ये तुम्ही अॅनिमेटेड प्रोजेक्ट तयार करू शकता आणि आम्ही तुम्हाला दिलेल्या स्टेप्स फॉलो करून तुम्ही ते एंटर करू शकता. तुम्ही चौकशी करत राहिल्यास आणि स्वत:ला माहिती देत ​​राहिल्यास, तुमच्या लक्षात येईल की आमच्यासाठी अनेक पर्याय उपलब्ध आहेत.

तुम्ही आधीच धाडस केले आहे का?


आपली टिप्पणी द्या

आपला ई-मेल पत्ता प्रकाशित केला जाणार नाही. आवश्यक फील्ड चिन्हांकित केले आहेत *

*

*

  1. डेटा जबाबदार: मिगुएल Áन्गल गॅटन
  2. डेटाचा उद्देशः नियंत्रण स्पॅम, टिप्पणी व्यवस्थापन.
  3. कायदे: आपली संमती
  4. डेटा संप्रेषण: कायदेशीर बंधन वगळता डेटा तृतीय पक्षास कळविला जाणार नाही.
  5. डेटा संग्रहण: ओकेन्टस नेटवर्क (EU) द्वारा होस्ट केलेला डेटाबेस
  6. अधिकारः कोणत्याही वेळी आपण आपली माहिती मर्यादित, पुनर्प्राप्त आणि हटवू शकता.