CSS एनिमेसनहरू

Css प्रस्तुति

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

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

तपाईलाई राम्ररी थाहा छ, कम्प्युटर संसार वेब पृष्ठहरू वा अनलाइन मिडियाको विकासको लागि आदेशहरू र उपयोगी उपकरणहरूले भरिएको छ, जुन हाल सहअस्तित्वमा छ। हामीसँग रहनुहोस् र यो नयाँ ट्यूटोरियलमा कम्प्युटिङ र अन्तरक्रियात्मकताको साथ आफ्नो स्तर बढाउन अर्को तरिका पत्ता लगाउनुहोस्।

एनिमेसनहरू के हुन्?

एनिमेसनको संसार

स्रोत: सबै गेमरहरू

हामी तपाइँ ट्यूटोरियलमा पूर्ण रूपमा प्रवेश गर्न चाहन्छौं, तर यसको लागि, यो एनिमेसनको संसारमा प्रवेश गर्न आवश्यक छ वा ग्राफिक डिजाइनमा के चिन्तित छ, संसारको संसारमा। अन्तरक्रियात्मक डिजाइन। 

Las animaciones también forman parte del mundo audiovisual, de hecho no serían nada si o fuera porque en ellas, se introduce un audio y una imagen en movimiento. Por ello, cuando hablamos de “animación”, nos referimos a lo que conocemos popularmente como “dibujos animados”.

माथिको संक्षेपमा, एनिमेसन कुनै चीजलाई आन्दोलन दिने क्षमताबाट उत्पन्न हुन्छ, यस अवस्थामा कार्टुनहरू। तर यी सबै आन्दोलनहरू कसरी प्राप्त हुन्छन्? निस्सन्देह, तिनीहरू हामी जसलाई भन्छौं त्यसबाट उत्पन्न हुन्छन्, रेखाचित्र वा तस्बिरहरूको अनुक्रम कि एक पछि अर्को क्रमबद्ध रूपमा आदेश दिएर, तिनीहरूले हाम्रो आँखा अगाडि एक विश्वसनीय आन्दोलन उत्पन्न गर्न प्रबन्ध गर्दछ, जसले आफैलाई उधारो दिन्छ र दृश्य भ्रमको खेलमा प्रवेश गर्दछ।

पहिले, पहिलो एनिमेसनहरू कागजको पानाहरूमा डिजाइन गरिएको थियो, तिनीहरूमध्ये प्रत्येकमा, एनिमेटेड क्यारेक्टरलाई कदम चाल्दै कोरिएको थियो, र पानाको अन्त्यमा पुगेपछि, यसलाई एक-एक गरी द्रुत गतिमा पारित गरियो। रेखाचित्र।

एनिमेसन प्रकारहरू

त्यहाँ विभिन्न प्रकारका एनिमेसनहरू छन्:

कार्टुन वा परम्परागत एनिमेसन

यो शैलीले नायक फ्रेमलाई फ्रेमद्वारा आन्दोलन दिने समावेश गर्दछ। सुरुमा, जब त्यहाँ पर्याप्त अडियोभिजुअल माध्यमहरू थिएनन्, तिनीहरू प्रत्येक फ्रेमको रेखाचित्र र चित्रण (पृष्ठभूमि, स्टेज वा एनिमेसनको पृष्ठभूमि सहित) मार्फत गरिन्छ, पछि हामीले फिल्म टेप भनेर चिनेका कुराहरूमा फिलिम गर्न।

मोशन रोक्नुहोस्

स्टप मोशन एउटा एनिमेसन प्रविधि हो जसको कार्टुनसँग कुनै सम्बन्ध छैन। यसबाहेक, यसको मुख्य उद्देश्य वस्तुहरूको चालहरू अनुकरण गर्नु हो जुन वास्तवमा पूर्ण रूपमा स्थिर छन् र यसलाई दुई चरणहरूमा विभाजित गरिएको छ: माटोको एनिमेसन वा क्लेमोसन र कठोर वस्तुहरूको एनिमेसन।

पिक्सेलेशन

Pixelation एक प्रविधि हो जुन Stop Motion बाट आउँछ र यसले वस्तुहरूसँग काम गर्ने समावेश गर्दछ जुन न त पुतली हो न मोडेलहरू, तर साधारण वस्तुहरू वा मानिसहरू। वस्तुहरू धेरै पटक फोटो खिचिन्छन् र प्रत्येक फ्रेमको साथ थोरै सिफ्ट हुन्छन्।

रोटोस्कोपी

यसमा अर्को रेखाचित्रको प्रत्यक्ष रेखाचित्र समावेश हुन्छ, जस्तै अर्को रेखाचित्र वा वास्तविक व्यक्तिको रेखाचित्रको ट्रेसिङ। यसलाई मोक्यापको अग्रसर मानिन्छ, अर्थात् मोशन क्याप्चर जुन सिनेमाको संसारमा डिजिटल क्यारेक्टरहरू पुन: सिर्जना गर्न प्रयोग गरिन्छ।

Cutouts वा Cutout Animation द्वारा एनिमेसन

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

3d एनिमेसन

3D एनिमेसन सम्पादक कार्यक्रमबाट उत्पन्न हुन्छ, जसले सिमुलेशन र एनिमेसनहरू गर्न अनुमति दिन्छ। यी दुई भेरियन्टहरूमा, राम्रो प्रकाश, क्यामेरा चालहरू र विशेष प्रभावहरू सम्पर्कमा आउँछन्।

हाल त्यहाँ अन्य प्रविधिहरू छन् जस्तै: काँचमा चित्रकला, बालुवाको एनिमेसन, गुजको पर्दा र सेलुलोइडमा चित्रकला। 

CSS के हो?

कार्यक्रमको Css इन्टरफेस

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

अब जब तपाइँ एनिमेसनको संसारको बारेमा अलि बढी जान्नुहुन्छ, यो हामीले तपाइँलाई CSS परिवर्णी शब्दहरूको संसारमा परिचय गराउने समय हो।

एक्रोनिम CSS, hacen referencia a “hojas de estilo en cascada”. Está formada por un lenguaje que se emplea en el sector del diseño y en la presentación de páginas web, par que o entandas mejor, son una serie de herramientas y comandos que se encargan de presentar una página web tal cuál la vemos nosotros por primera vez una vez que ya ha sido creada. Funciona junto con la herramienta HTML (पृष्ठहरूको आधारभूत सामग्रीबाट संगठित)।

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

CSS के का लागि हो?

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

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

CSS मा एनिमेट गर्नुहोस्

ठिक छ, अब तपाईलाई एनिमेसन र CSS को संसारको बारेमा थोरै थाहा छ। यो ट्यूटोरियल सुरु गर्ने समय हो।

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

यी एनिमेसन मध्ये प्रत्येक लाभ को एक श्रृंखला छ:

  • यसको प्रयोग सरल एनिमेसनहरूको लागि धेरै सजिलो छ, तपाईं जाभास्क्रिप्टको ज्ञान बिना पनि गर्न सक्नुहुन्छ।
  • कम पावर कम्प्युटरहरूमा पनि एनिमेसन सही रूपमा प्रदर्शित हुन्छ।
  • ब्राउजर द्वारा नियन्त्रित भएकोले, यसले यसको कार्यसम्पादन र दक्षतालाई अनुकूलन गर्न अनुमति दिन्छ, यसरी फ्रिक्वेन्सी घटाउँछ र ट्याबहरू नदेखिने गरी कार्यान्वयन गर्दछ।

एनिमेसन सेटिङहरू

एनिमेसन सुरु गर्न, सबै भन्दा पहिले हामीले यसलाई कन्फिगर गर्नुपर्नेछ। यो गर्नको लागि, हामी सम्पत्तीमा जान्छौं एनिमेसन र यसको उप-गुणहरूमा। यो उपकरणले हामीलाई ताल र एनिमेसनको अवधि कन्फिगर गर्न अनुमति दिन्छ र यसको अनुक्रम पनि होइन।

उप-गुणहरू हुन्:

एनिमेसन - ढिलाइ

तत्व लोड भएको क्षण र एनिमेसन अनुक्रमको सुरुवात बीचको समय ढिलाइ।

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

एनिमेसनले क्रमको अन्त्यमा सुरु फ्रेममा फिर्ता जानुपर्छ वा अन्त्यमा पुग्दा सुरुबाट सुरु गर्नुपर्छ कि हुँदैन भनेर संकेत गर्छ।

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

एनिमेसनले आफ्नो चक्र (अवधि) पूरा गर्न कति समय लिन्छ भनेर संकेत गर्छ।

एनिमेसन - पुनरावृत्ति - गणना

यो पटक पटक दोहोर्याइएको संख्या। संकेत गर्न सक्छौं अनन्त अनिश्चित कालका लागि एनिमेसन दोहोर्याउन।

एनिमेसन - नाम

यो प्रत्येक एनिमेसन फ्रेमहरू वर्णन गर्ने नाम निर्दिष्ट गर्न प्रयोग गरिन्छ।

एनिमेसन - प्ले - राज्य

तपाईंलाई एनिमेसन अनुक्रम पज र पुन: सुरु गर्न सक्षम हुन अनुमति दिन्छ।

एनिमेसन - समय - प्रकार्य

यसले एनिमेसनको लयलाई संकेत गर्दछ, त्यो हो, कसरी एनिमेसन फ्रेमहरू देखाइन्छ, यसको लागि, एक्सेलेरेशन कर्भहरू स्थापित हुन्छन्।

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

एनिमेसन समाप्त भएपछि गुणहरूमा कुन मानहरू हुनेछन् भनेर निर्दिष्ट गर्दछ।

फ्रेम संग अनुक्रम सेट अप गर्नुहोस्

एक पटक हामीले समय, नामकरण आदि कन्फिगर गरेपछि। यो हाम्रो एनिमेसनलाई हेर्न वा अनुभव गर्ने समय हो।

यो गर्नको लागि, हामी दुई नयाँ फ्रेमहरू स्थापना गर्नेछौं र नियम प्रयोग गर्नेछौं @keyframes। यससँग, प्रत्येक फ्रेमले एनिमेसन अनुक्रममा प्रत्येक तत्व कसरी फेला पार्छ भनेर वर्णन गर्दछ।

संकेत गर्न समय र लय, फ्रेम प्रयोग गर्दछ प्रतिशत र साथ देखि र सम्मयसका लागि धन्यवाद, हामी संकेत गर्न सक्छौं कि कहिले सुरु 0% र अन्त्य 100% संग हुन्छ।

फ्रेम र पाठ एनिमेसन

थप फ्रेमहरू थप्न र तिनीहरूलाई पाठको साथ एनिमेट गर्न, तपाईंले हेडर फन्टको ठूलो आकार लागू गर्न आवश्यक छ ताकि हेडर निश्चित समयको लागि बढ्दै जान्छ, र त्यसपछि यसको मूल आकारमा घट्छ। यसको लागि हामी निम्न कोड स्थापना गर्न जाँदैछौं:

७५% फन्ट - साइज: ३००%; मार्जन - बायाँ: 75%; चौडाइ: 300%;

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

एनिमेसन दोहोर्याउनुहोस्

एनिमेसन दोहोर्याउनको लागि, निम्न गुणहरू प्रयोग गर्न आवश्यक छ एनिमेसन - पुनरावृत्ति - गणना र हामीले यसलाई कति पटक दोहोर्याउन चाहन्छौं भनेर संकेत गर्नुपर्छ। हामी पनि प्रयोग गर्न सक्छौं अनन्त ताकि यो सधैं दोहोर्याइएको छ।

निष्कर्ष

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

के तपाईंले पहिले नै हिम्मत गर्नुभयो?


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

टिप्पणी गर्न पहिलो हुनुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन।

*

*

  1. डाटाका लागि उत्तरदायी: मिगुएल gelन्गल ग्याटन
  2. डाटाको उद्देश्य: नियन्त्रण स्पाम, टिप्पणी प्रबन्धन।
  3. वैधानिकता: तपाईंको सहमति
  4. डाटाको सञ्चार: डाटा कानुनी बाध्यता बाहेक तेस्रो पक्षलाई सूचित गरिने छैन।
  5. डाटा भण्डारण: डाटाबेस ओसीन्टस नेटवर्क (EU) द्वारा होस्ट गरिएको
  6. अधिकार: कुनै पनि समयमा तपाईं सीमित गर्न सक्नुहुनेछ, पुन: प्राप्ति र तपाईंको जानकारी मेटाउन।