क्लासिक टाइपराइटर प्रभाव बनाने के लिए आपको जावास्क्रिप्ट की आवश्यकता नहीं है। जानें कि स्टेप्स() फ़ंक्शन का उपयोग करके केवल सीएसएस के साथ इसे कैसे करें।
कैस्केडिंग स्टाइल शीट्स (सीएसएस) ने अपनी स्थापना के बाद से एक लंबा सफर तय किया है। ऐसी कुछ चीजें हैं जो केवल सीएसएस के साथ संभव हैं जिनके बारे में आप नहीं जानते होंगे, भाषा के निरंतर विकास और संवर्द्धन के लिए धन्यवाद।
सीएसएस में सबसे उल्लेखनीय प्रगति में से एक सीएसएस फ़ंक्शंस का उद्भव और परिशोधन है, जिसने वेब सामग्री को स्टाइल करने की क्षमताओं और शक्ति में काफी विस्तार किया है।
टाइपराइटर प्रभाव क्या है?
टाइपराइटर प्रभाव एक टेक्स्ट एनीमेशन तकनीक है जो सामग्री को उत्तरोत्तर प्रकट करने की प्रक्रिया का अनुकरण करती है, टाइपिंग के कार्य की नकल करती है क्योंकि यह दर्शकों की आंखों के सामने प्रकट होती है। यह प्रभाव पुराने स्कूल के टाइपराइटर, शुरुआती कंप्यूटर टर्मिनलों या की याद दिलाता है कमांड लाइन इंटरफेस (सीएलआई).
पाठ की क्रमिक उपस्थिति रहस्य और साज़िश का एक तत्व जोड़ती है, जिससे दर्शकों को सामने आने वाले संदेश पर बारीकी से ध्यान देने के लिए प्रोत्साहित किया जाता है।
सीएसएस चरण() फ़ंक्शन कैसे काम करता है
सीएसएस में फ़ंक्शंस लचीलेपन का एक स्तर पेश करते हैं जिसे पहले अकेले स्थिर शैलियों का उपयोग करके हासिल करना चुनौतीपूर्ण था। कदम() फ़ंक्शन एक लोकप्रिय फ़ंक्शन है जिसका उपयोग सीएसएस एनिमेशन में किया जाता है। इससे एनिमेशन ऐसे दिखते हैं जैसे वे सुचारु रूप से परिवर्तित होने के बजाय अलग-अलग, अलग-अलग चरणों में आगे बढ़ रहे हैं।
कदम() एक एनीमेशन टाइमिंग फ़ंक्शन है जो दो पैरामीटर लेता है। पहला पैरामीटर उन चरणों की संख्या को दर्शाता है जिन्हें आप अपने एनीमेशन से लेना चाहते हैं। दूसरा पैरामीटर प्रत्येक चरण के व्यवहार को परिभाषित करता है। के लिए वाक्यविन्यास कदम() फ़ंक्शन इस तरह दिखते हैं:
animation-timing-function: steps(n, direction)
उपरोक्त कोड ब्लॉक में, कदम() फ़ंक्शन के दो पैरामीटर हैं: एन और दिशा. दिशा पैरामीटर या तो हो सकता है शुरू या अंत.
की स्थापना दिशा को शुरू यह सुनिश्चित करता है कि एनीमेशन शुरू होते ही पहला चरण पूरा हो जाए। वहीं, सेटिंग दिशा को अंत एनीमेशन समाप्त होते ही अंतिम चरण चलेगा। के महत्व को समझाने के लिए कदम() फ़ंक्शन, निम्नलिखित HTML कोड पर एक नज़र डालें:
<divclass="container">
<div>div>
div>
उपरोक्त कोड ब्लॉक परिभाषित करता है CONTAINER एक बच्चे के साथ div div. यदि आप चाहते हैं कि चाइल्ड डिव स्क्रीन पर ग्लाइड हो, तो आप इस तरह सीएसएस एनिमेशन का उपयोग करें:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
उपरोक्त कोड ब्लॉक इसका उपयोग करता है एनीमेशन को परिभाषित करने के लिए @keyframes नियम नाम movebox. फिर इस एनीमेशन को चाइल्ड डिव पर लागू किया जाता है, जिससे यह स्क्रीन पर अनंत लूप में आसानी से घूम सकता है।
GIPHY के माध्यम से
यदि आपको सहज एनीमेशन पसंद नहीं है और आप "तड़का हुआ" प्रभाव प्राप्त करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं कदम() इस तरह कार्य करें:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
जैसा कि आप नीचे GIF में देख सकते हैं, इसमें शामिल है कदम() 10 के पैरामीटर मान वाला फ़ंक्शन स्मूथ एनीमेशन के बजाय चरणों में चाइल्ड डिव को एनिमेट करेगा। चरणों की संख्या जितनी अधिक होगी, आपका एनीमेशन उतना ही कम अस्थिर दिखेगा।
GIPHY के माध्यम से
उपरोक्त उदाहरण में, दिशा पैरामीटर प्रदान किया गया है. हालाँकि, यदि आप इसे छोड़ देते हैं दिशा, ब्राउज़र का उपयोग करेगा अंत के लिए डिफ़ॉल्ट मान के रूप में दिशा.
टाइपराइटर प्रभाव बनाना
अब जब आप समझ गए हैं कि कैसे कदम() फ़ंक्शन काम करता है, जो कुछ भी आपने सीखा है उसे अभ्यास में लाने का समय आ गया है। एक नया फ़ोल्डर बनाएं और उसे उचित नाम दें. उस फ़ोल्डर में, एक जोड़ें Index.htm मार्कअप के लिए फ़ाइल और a स्टाइल.सीएसएस स्टाइलिंग के लिए फ़ाइल.
में Index.htm फ़ाइल में निम्नलिखित बॉयलरप्लेट कोड जोड़ें:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
div>
div>
body>
html>उपरोक्त कोड ब्लॉक a के लिए मार्कअप को परिभाषित करता है सरल HTML वेबसाइट. वहां एक है CONTAINER div जिसमें कुछ डमी टेक्स्ट के साथ एक और div है।
पाठ को एनिमेट करना
खोलें शैलियाँ.सीएसएस फ़ाइल करें और इसकी चौड़ाई निर्धारित करें CONTAINER div को इसकी सामग्री की चौड़ाई तक।
.container{
width: fit-content;
}
अगला, का उपयोग कर @कीफ़्रेम्स नियम, एक एनीमेशन को परिभाषित करें जो नियंत्रित करता है कि एनीमेशन समय के साथ कैसे आगे बढ़ता है। चौड़ाई को "0%" पर सेट करें 0%. पर 100%, चौड़ाई को इस प्रकार "100%" पर सेट करें:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
इसके बाद, क्लास नाम के साथ तत्व का चयन करें मूलपाठ और सेट करें अतिप्रवाह संपत्ति को छिपा हुआ. ऐसा करने से यह सुनिश्चित हो जाएगा कि टेक्स्ट तब तक छिपा रहेगा जब तक टाइपिंग प्रभाव शुरू नहीं हो जाता। ऐसा करने के बाद, सेट करके सुनिश्चित करें कि टेक्स्ट एक लाइन पर रहे खाली स्थान के संपत्ति को nowrap. दो मूलपाठ एक मोनोस्पेस फ़ॉन्ट को वर्गीकृत करें और टेक्स्ट के दाईं ओर एक हरा लंबवत बॉर्डर जोड़ें।
यह बॉर्डर कर्सर का रूप देगा. उपयुक्त सेट करें फ़ॉन्ट आकार और यह एनिमेशन संपत्ति को पाठ टाइप करे. अंत में, जोड़ें कदम() के लिए कार्य करें एनीमेशन-टाइमिंग-फ़ंक्शन.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}
जब आप ब्राउज़र में कोड चलाते हैं, तो आपको यह देखना चाहिए:
GIPHY के माध्यम से
यदि आप लंबा टाइपिंग प्रभाव चाहते हैं, तो आप एनीमेशन अवधि और इसमें निर्दिष्ट चरणों की संख्या को समायोजित कर सकते हैं कदम() समारोह।
कर्सर को जीवंत बनाना
टाइपराइटर प्रभाव लगभग पूरा हो गया है, हालाँकि, एक गायब विशेषता है, जो कि ब्लिंकिंग कर्सर है। याद रखें कि अंतिम कोड ब्लॉक में, कर्सर के रूप में काम करने के लिए टेक्स्ट पर एक दाहिनी ओर की सीमा निर्धारित की गई थी। आप इसका उपयोग करके इस कर्सर में एक एनीमेशन जोड़ सकते हैं @कीफ़्रेम्स शासन भी करो.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
कस्टम एनीमेशन को परिभाषित करने के बाद, एनीमेशन नाम जोड़ें एनिमेशन संपत्ति पर मूलपाठ कक्षा बनाएं और अवधि को 0.6 सेकंड पर सेट करें।
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
अब जब आप कोड चलाएंगे, तो आपको एक चमकता हुआ कर्सर दिखना चाहिए।
GIPHY के माध्यम से
सीएसएस फ़ंक्शंस की शक्ति
सीएसएस फ़ंक्शंस ने वेबसाइटों के निर्माण के तरीके में क्रांति ला दी है, जो एक डेवलपर के रूप में आपको एक उल्लेखनीय टूलकिट प्रदान करता है। ये बहुमुखी फ़ंक्शन गतिशील स्टाइलिंग और इंटरैक्शन को सक्षम करते हैं जो एक बार जटिल स्क्रिप्टिंग भाषाओं के लिए आरक्षित थे।
रंग हेरफेर से लेकर प्रतिक्रियाशील लेआउट, एनिमेशन और रचनात्मक परिवर्तनों तक, सीएसएस फ़ंक्शंस ने वेब डिज़ाइन की संभावनाओं का विस्तार किया है। लचीली गणनाओं के लिए कैल्क(), शानदार पृष्ठभूमि के लिए लीनियर-ग्रेडिएंट() जैसे फ़ंक्शंस के साथ मनमोहक एनिमेशन के लिए Translate(), आप दृश्य रूप से आकर्षक और आकर्षक उपयोगकर्ता तैयार कर सकते हैं अनुभव.