CSS3 एनीमेशन के साथ उन्नत मार्की बनाना
आज हम एक नजर डालने जा रहे हैं “मार्की” एक बार फिर। हमने वास्तव में अपने पिछले पोस्ट में इसके बारे में कवर किया है जिसमें उपयोग करने के बारे में बात की गई थी -वेबकिट-मार्की संपत्ति, लेकिन इस बार हम इस विषय को थोड़ा और आगे ले जाएंगे.
इस पोस्ट में, हम एक बनाने जा रहे हैं मार्की की तरह CSS3 एनीमेशन का उपयोग करके प्रभाव। इस तरह हम अधिक कार्यक्षमताओं को जोड़ने में सक्षम होंगे जिन्हें केवल प्राप्त नहीं किया जा सकता था -वेबकिट-मार्की.
जब तक आप CSS3 एनीमेशन मॉड्यूल से पहले से ही परिचित नहीं हैं, हम आपको इस दस्तावेज के साथ आगे बढ़ने से पहले निम्नलिखित संदर्भों पर एक नज़र डालने की सलाह देते हैं:
- CSS3 के एनिमेशन - W3School
- सीएसएस एनिमेशन - मोज़िला देव। नेटवर्क
यह भी ध्यान रखें कि, इस समय, CSS3 का एनीमेशन केवल फ़ायरफ़ॉक्स 8+, क्रोम 12+ और सफारी 5.0+ में उपसर्ग संस्करण के साथ काम कर सकता है (-moz- तथा -वेबकिट-)। हालाँकि, हम केवल W3C से उपसर्ग के बिना आधिकारिक संस्करण का उपयोग करेंगे, ताकि इस लेख को सुपरफ्लॉप कोड के साथ ओवरस्टफिंग से बचा जा सके।.
मार्की अंक को संबोधित करते हुए
मार्की के साथ समस्याओं में से एक यह है कि पाठ लगातार बढ़ रहा है। यह व्यवहार पढ़ने के लिए विघटनकारी है, और पाठ को पढ़ना भी मुश्किल है। इस बार, हम अपने खुद के मार्की संस्करण बनाने और इसे उपयोगकर्ता-मित्र बनाने की कोशिश करेंगे। उदाहरण के लिए; पाठ को लगातार ले जाने के बजाय, यह पूरी तरह से दिखाई देने पर हम इसे रोक देंगे, इसलिए उपयोगकर्ता एक पल के लिए पाठ पढ़ सकता है.
स्टोरीबोर्ड (सॉर्ट)
प्रत्येक रचनात्मक और डिज़ाइन निर्माण, लोगो, चित्रण या वेबसाइट की तरह, आमतौर पर एक स्केच से शुरू होता है। एनीमेशन उत्पादन के क्षेत्र में, यह एक स्टोरीबोर्ड के साथ किया जाता है। इससे पहले कि हम किसी कोडिंग पर शुरू करें, हम पहले एक बनाएँगे स्टोरीबोर्ड की तरह, हमारे एनीमेशन की कल्पना करने में हमारी सहायता करने के लिए.
जैसा कि आप उपरोक्त स्टोरीबोर्ड से देख सकते हैं, हमारी योजना केवल पाठ की दो पंक्तियाँ दिखाने की है, जो दोनों क्रमिक रूप से बाएँ से दाएँ जाएँगी.
हमारा स्टोरीबोर्ड वास्तविक एनीमेशन फिल्म के लिए स्टोरीबोर्ड के रूप में जटिल नहीं है, लेकिन मुद्दा यह है: अब हम यह कल्पना करने में सक्षम हैं कि हमारा मार्की कैसा दिखेगा.
HTML मार्कअप
चूँकि हमारा एनीमेशन सरल होने जा रहा है, HTML मार्कअप भी उतना ही सरल होगा:
बिना Plugins के WordPress Related Posts कैसे जोड़ें
कार्रवाई के साथ अपने ड्रॉपबॉक्स फ़ाइलें स्वचालित
मूल शैलियाँ
एनीमेशन सामान के आसपास काम करने से पहले, आइए कुछ बुनियादी शैलियों को जोड़ें। के लिए एक पृष्ठभूमि बनावट जोड़कर शुरू करते हैं एचटीएमएल तत्त्व.
html पृष्ठभूमि: url ('... /images/skewed_print.png'); अगला, हम ब्राउज़र विंडो के केंद्र में मार्की को बनाएंगे और साथ ही साथ आंतरिक छाया, पृष्ठभूमि रंग और बॉर्डर जैसे कुछ विवरण जोड़ेंगे.
.मार्की चौड़ाई: 500 पीएक्स; ऊंचाई: 50 पीएक्स; मार्जिन: 25 पीएक्स ऑटो; छिपा हुआ सैलाब; स्थिति: रिश्तेदार; बॉर्डर: 1px ठोस # 000; मार्जिन: 25 पीएक्स ऑटो; पृष्ठभूमि-रंग: # 222; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स; -webkit-box-shadow: इनसेट 0px 2px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rpxba (250, 250, 250, .2); बॉक्स-छाया: इनसेट 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
फिर, हम पाठ को स्थिति देंगे - जो इस मामले में पैराग्राफ टैग के अंदर लिपटा हुआ है - बिल्कुल, और चूंकि पूर्ण स्थिति के कारण तत्व का पतन होगा, हमें चौड़ाई के तत्व को परिभाषित करना होगा 100% तो अपने माता पिता की चौड़ाई को कवर करने के लिए.
.मार्की पी स्थिति: निरपेक्ष; फ़ॉन्ट-परिवार: ताओमा, एरियल, संस-सेरिफ़; चौड़ाई: 100%; ऊंचाई: 100%; मार्जिन: 0; लाइन-ऊँचाई: 50 पीएक्स; पाठ-संरेखण: केंद्र; रंग: #fff; पाठ-छाया: 1px 1px 0px # 000000; फ़िल्टर: ड्रॉपशेडो (रंग = # 000000, ऑफेक्स = 1, ऑफ़ी = 1);
आइए थोड़ी देर के लिए परिणाम पर एक नज़र डालें.
इस बिंदु पर, हमने उन सभी बुनियादी शैलियों के साथ किया है जिनकी हमें ज़रूरत है; आप अधिक या व्यक्तिगत शैलियों को जोड़ने के लिए स्वतंत्र हैं। लेकिन, हम आपको ट्यूटोरियल के अंत तक हमारे निर्दिष्ट मार्की आयाम (ऊंचाई और चौड़ाई) के साथ रहने का सुझाव देते हैं.
एनीमेशन
संक्षेप में, एनीमेशन चलती वस्तुओं की एक प्रस्तुति है। प्रत्येक आंदोलन को एक समय सीमा में परिभाषित किया गया है। इसलिए, जब हम एनीमेशन पर काम कर रहे हैं, हम ज्यादातर के साथ काम कर रहे हैं पहर. हम इस तरह के मामलों को ध्यान में रखते हैं:
- वस्तु कब चलना शुरू होती है?
- वस्तु को एक बिंदु से दूसरे बिंदु पर जाने में कितना समय लगता है?
- किसी दिए गए बिंदु पर वस्तु को कब और कब तक रहना चाहिए?
CSS3 के एनीमेशन में, पहर के साथ परिभाषित किया जा सकता है @keyframe वाक्य - विन्यास। लेकिन, इस खंड में कूदने से पहले, आइए सबसे पहले मार्की टेक्स्ट शुरुआती स्थिति को निर्दिष्ट करें.
हमने योजना बनाई है कि पाठ दाईं ओर से शुरू होगा, फिर दाईं ओर ले जाएगा। इसलिए, यहां हम पहले CSS3 परिवर्तन संपत्ति का उपयोग करके इसे दाईं ओर स्थिति देंगे.
.मार्की पी ट्रांसफॉर्म: ट्रांसलेक्स (100%);
याद करो 100% हमने अपने पैराग्राफ तत्व के लिए जो परिभाषित किया है, वह उसके माता-पिता के बराबर था चौड़ाई. तो, यहाँ भी लागू किया जाएगा; पैराग्राफ तत्व होगा अनुवाद के लिए सही है 100% जो इस उदाहरण में बराबर है 500px.
मुख्य-फ़्रेम
@keyframe कुछ लोगों के लिए वाक्यविन्यास थोड़ा हैरान करने वाला हो सकता है, इसलिए यहां हमने एक सरल दृश्य मार्गदर्शिका बनाई है जो आपको आसानी से समझने में मदद करेगी कि इसमें क्या हो रहा है @keyframe वाक्य - विन्यास.
बड़ा संस्करण देखने के लिए यहां क्लिक करें.
पूरे एनीमेशन के बारे में पिछले जाएगा 20 सेकंड और स्थायी रूप से दो अनुक्रमों में विभाजित है दस पल से प्रत्येक.
पहले क्रम में, पहला पाठ दाईं ओर से तुरंत स्लाइड करेगा और उपयोगकर्ता को पाठ पढ़ने देने के लिए क्षण भर दिखाई देगा, जबकि दूसरा पाठ छिपा रहेगा। दूसरे क्रम में, पहला मार्की टेक्स्ट बाईं ओर स्लाइड-आउट होगा, और दूसरा टेक्स्ट तुरंत दाईं ओर से स्लाइड-इन होगा.
और यहाँ सभी keyframe कोड हैं जिन्हें हमें एनीमेशन चलाने के लिए लागू करने की आवश्यकता है.
@keyframes के बाएँ-एक 0% ट्रांसफ़ॉर्म: ट्रांस्फ़्लेक्स (100%); 10% ट्रांसफ़ॉर्म: ट्रांसलेक्स (0); 40% ट्रांसफ़ॉर्म: ट्रांसलेक्स (0); 50% ट्रांसफॉर्म: ट्रांसलेक्स (-100%); 100% ट्रांसफ़ॉर्म: ट्रांसलेक्स (-100%); @keyframes बाएँ-दो ०% रूपांतर: TranslX (१००%); 50% ट्रांसफ़ॉर्म: ट्रांसलेक्स (100%); 60% रूपांतरण: ट्रांसप्लक्स (0); 90% ट्रांसफ़ॉर्म: ट्रांसलेक्स (0); 100% ट्रांसफ़ॉर्म: ट्रांसलेक्स (-100%);
बचा हुआ एक कीफ्रेम एनीमेशन के पहले अनुक्रम को परिभाषित करेगा, जबकि दर्शन बाएं दो कीफ्रेम दूसरे अनुक्रम को परिभाषित करेगा.
तत्वों के लिए एनीमेशन लागू करना
काम करने के लिए एनीमेशन के लिए, तत्व को एनीमेशन लागू करने के लिए मत भूलना। पहला अनुक्रम पहले पाठ के लिए या इस मामले में पहला पैराग्राफ लागू किया जाता है और दूसरा क्रम दूसरे पैराग्राफ के लिए भी लागू किया जाता है.
.मार्की पी: एनटीएच-चाइल्ड (1) एनीमेशन: लेफ्ट-वन 20 एस सहज अनंत; .marquee p: nth-child (2) एनीमेशन: left-दो 20s आसानी से अनंत;
हम सब अपने एनीमेशन के साथ किया जाता है; चलो ब्राउज़र पर परिणाम देखते हैं.
- डेमो
- स्रोत डाउनलोड करें
बोनस
हम इसे ऊपर से नीचे या इसके विपरीत ले जाने के लिए मार्की टेक्स्ट को भी परिभाषित कर सकते हैं, ठीक वैसे ही जैसे हमने अपनी पिछली पोस्ट में किया था। यहां है कि इसे कैसे करना है; नीचे दिए गए इस के साथ हमारे उपरोक्त एनिमेशन कोड बदलें पाठ को नीचे की ओर ले जाएं:
.मार्की पी ट्रांसफॉर्म: ट्रांसली (-100%); @keyframes डाउन-वन 0% ट्रांसफॉर्म: ट्रांसली (-100%); 10% रूपांतर: TranslY (0); 40% रूपांतर: ट्रांस्वाय (0); 50% ट्रांसफ़ॉर्म: ट्रांसली (100%); 100% ट्रांसफ़ॉर्म: ट्रांसली (100%); @keyframes डाउन-दो ०% ट्रांसफॉर्म: ट्रांसली (-१००%); 50% ट्रांसफ़ॉर्म: ट्रांसली (-100%); 60% रूपांतर: ट्रांस्वाय (0); ९ ०% ट्रांसफ़ॉर्मेशन: ट्रांसली (०); 100% ट्रांसफ़ॉर्म: ट्रांसली (100%);
गौर करें कि हमने बदल दिया है X- अक्ष सेवा मेरे शाफ़्ट और सभी फ्लिप अनुवाद सकारात्मक और इसके विपरीत करने के लिए नकारात्मक मूल्य.
हमारे पास भी है एनिमेशन का नाम बदला सेवा मेरे नीचे एक तथा नीचे दो, इसलिए हमें पैराग्राफ तत्व में एनीमेशन नाम को फिर से लागू करने की आवश्यकता है.
.मार्की पी: एनटीटी-चाइल्ड (1) एनीमेशन: डाउन-वन 20 एस सहज अनंत; .marquee p: nth-child (2) एनीमेशन: डाउन-टू 20 एस सहज असीम;
या फिर, यदि आप इसे विपरीत स्थानांतरित करना चाहते हैं; नीचे से ऊपर तक. यहां उन सभी कोड हैं जिन्हें आपको लागू करने की आवश्यकता है:
.marquee.up p ट्रांस्फ़ॉर्म: TranslY (100%); .marquee.up p: nth-child (1) एनीमेशन: up-one 20s सहजता अनंत; .marquee.up p: nth-child (2) एनीमेशन: अप-टू 20 एस आसानी से अनंत; @keyframes ऊपर-एक 0% ट्रांसफ़ॉर्म: ट्रांसली (100%); 10% रूपांतर: TranslY (0); 40% रूपांतर: ट्रांस्वाय (0); 50% ट्रांसफ़ॉर्म: ट्रांसली (-100%); 100% ट्रांसफ़ॉर्म: ट्रांसली (-100%); @keyframes अप-दो 0% ट्रांसफ़ॉर्म: ट्रांसली (100%); 50% ट्रांसफ़ॉर्म: ट्रांसली (100%); 60% रूपांतर: ट्रांस्वाय (0); ९ ०% ट्रांसफ़ॉर्मेशन: ट्रांसली (०); 100% ट्रांसफ़ॉर्म: ट्रांसली (-100%);
- डेमो
- स्रोत डाउनलोड करें
निष्कर्ष
वर्तमान ब्राउज़र समर्थन की कमी के बावजूद, CSS3 एनीमेशन, अगर ठीक से किया जाता है, तो निस्संदेह भविष्य में कई प्रयोज्य मुद्दों को हल करेगा, जैसे हमने इस उदाहरण में किया है। अगर हमें आधुनिक ब्राउज़रों के लिए केवल एक संक्षिप्त एनीमेशन की आवश्यकता है, तो CSS3 एनीमेशन का उपयोग करना संभवतः jQuery स्क्रिप्ट लोड करने से बेहतर है.
अंत में, हम जानते हैं कि यह लेख कुछ लोगों के लिए थोड़ा भारी हो सकता है, इसलिए यदि आपके पास इस लेख के बारे में कोई प्रश्न हैं, तो नीचे टिप्पणी अनुभाग में इसे पोस्ट करने के लिए स्वतंत्र महसूस करें.
