Create an animated steam text effect

Feb 7, 2026
कैसे करना है
Steam text effect

पाठ में प्रभाव जोड़ना सगाई और ब्याज का एक नया स्तर जोड़ सकता है। जैसे प्रभाव काइनेटिक टाइपोग्राफी एक दर्शक का ध्यान आकर्षित करेगा, सहायता प्रयोगकर्ता का अनुभव और बताई गई कहानी को बताने में मदद करें। पर पाठ प्रभाव चमत्कार करना साइट लाता है वेब फ़ॉन्ट लाइन द्वारा फोकस लाइन में। कुछ इसी तरह को फिर से बनाने के तरीके को जानने के लिए पढ़ें। [2 9]

लाओ प्रोजेक्ट फाइलें इस ट्यूटोरियल का पालन करने में मदद करने के लिए। [2 9]

01. HTML दस्तावेज़ शुरू करें

पहला कदम दस्तावेज़ संरचना को परिभाषित करना है जो HTML सामग्री को संग्रहीत करेगा। इसमें दस्तावेज़ कंटेनर शामिल है, जो सिर और शरीर के वर्गों को स्टोर करता है। जबकि हेड सेक्शन बाहरी सीएसएस और जावास्क्रिप्ट संसाधनों के लिए स्याही स्टोर करता है, शरीर चरण 02 में बनाई गई दृश्यमान सामग्री को संग्रहीत करता है। [2 9] 

 ​​& lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; धुंध पाठ & lt; / शीर्षक & gt;
& lt; लिंक rel = "stylesheet" प्रकार = "टेक्स्ट / सीएसएस" Href = "styles.css" / & gt;
& lt; स्क्रिप्ट src = "code.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
  *** चरण 2 यहाँ
& lt; / शरीर & gt;
& lt; / html & gt;

02. HTML सामग्री

यह चरण दृश्यमान HTML सामग्री को परिभाषित करता है। ध्यान दें कि कैसे ग्रंथों को धुंध प्रभाव देने के लिए नामित किया जाता है, सभी एक कंटेनर के भीतर निहित हैं जिसमें 'धुंधला' वर्ग है। इस वर्ग का उपयोग जावास्क्रिप्ट द्वारा चरण 03, और बाद के चरणों में सीएसएस द्वारा संदर्भित करने के लिए किया जाता है। [2 9] 

 ​​& lt; h2 & gt;
  अनुशासन से आता है
  & lt; उल वर्ग = "धुंध" & gt;
  & lt; li & gt; प्रतिबद्धता & lt; / li & gt;
  & lt; li & gt; दृढ़ता & lt; / li & gt;
  & lt; li & gt; समर्पण & lt; / li & gt;
  & lt; li & gt; प्रशिक्षण & lt; / li & gt;
  & lt; li & gt; आकांक्षा & lt; / li & gt;
  & lt; li & gt; शिक्षा & lt; / li & gt;
  & lt; / उल & gt;
& lt; / h2 & gt;

03. स्वचालित एनीमेशन देरी

'Code.js' नामक एक नई फ़ाइल बनाएं। धुंध कंटेनर के अंदर प्रत्येक आइटम को पिछले आइटम के तीन सेकंड बाद प्रस्तुत किया जाना है। जावास्क्रिप्ट का उपयोग अद्वितीय सीएसएस विशेषताओं के आवेदन को स्वचालित करने के लिए किया जाता है। इसका पहला चरण धुंध कंटेनर के अंदर सभी प्रथम स्तरीय वस्तुओं का चयन करना है - पृष्ठ लोड होने के बाद। [2 9] 

 window.addeventlistener ("लोड", फ़ंक्शन () {
  var nodes = document.queryellecterall ("। ब्लर और जीटी; *");
  *** चरण 4 यहाँ
}); [4 9]
  

   04. सेकंड की संख्या
  

  

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

  

  
 के लिए (var i = 0; i & lt; nodes.length; i ++) {
  नोड्स [i] .style.animationdelay = (i * 3) + "s";
} [4 9]
  

   05. सीएसएस ब्लर
  

  

   'Styles.css' नामक एक नई फ़ाइल बनाएं। सीएसएस प्रस्तुति नियमों को परिभाषित करने के लिए पहला कदम प्रत्येक पाठ वस्तुओं को अदृश्य के रूप में शुरू करता है। 'एनीमेशनब्लूर' नामक एक एनीमेशन भी लागू होता है जो पांच-सेकंड की अवधि में आइटम को देखने में एनिमेट करेगा। एनीमेशन मोड को 'फॉरवर्ड' पर सेट किया जाना चाहिए ताकि यह अपने अंतिम फ्रेम पर रुक जाए।
  [2 9]
  
 .Blur & gt; * {
  अस्पष्टता: 0;
  एनीमेशन: 5s आगे एनिमेटब्लूरूर;
} [4 9]
  

   06. एनीमेशन आरंभ करें
  

  

   चरण 5 में 'ब्लर' तत्वों पर लागू एनीमेशन इस चरण में परिभाषित किया गया है। 'एनीमेशनब्लूर' का संदर्भ एक कीफ्रेम एनीमेशन के रूप में बनाया गया है। पहला फ्रेम 'से' तत्वों को एक पाठ छाया के साथ दिखाई देता है - लेकिन एक पारदर्शी पाठ रंग के साथ। यह वही है जो धुंधला पाठ प्रभाव पैदा करता है।
  [2 9]
  
 @keyframes animateblur {
  {से
  अस्पष्टता: 1;
  पाठ-छाया: 0 0 1em आरजीबीए (0,0,0, .5);
  रंग: आरजीबीए (0,0,0,0);
  }
    *** चरण 7 यहाँ
} [4 9]
  

   07. अंतिम एनीमेशन फ्रेम
  

  

   एनीमेशन के भीतर 'to' फ्रेम अंतिम फ्रेम को परिभाषित करता है कि टेक्स्ट को एनिमेटेड किया जाएगा। यह फ्रेम टेक्स्ट छाया को गायब करने के लिए सेट करता है, साथ ही एक टेक्स्ट रंग के साथ जो पूरी तरह से दिखाई देता है। चरण 06 के साथ संयुक्त, 'से' और 'to' के बीच एनीमेशन फ्रेम स्वचालित रूप से ब्राउज़र द्वारा गणना की जाएगी।
  [2 9]
  
 से {
  अस्पष्टता: 1;
  पाठ-छाया: 0 0 0 पीएक्स आरजीबीए (0,0,0,0);
  रंग: # 000;
} [4 9]
  

   
    यह लेख मूल रूप से वेब डिजाइनर पत्रिका में दिखाई दिया।
   
   [9 3]
    
     यहां सदस्यता लें

। [2 9]

याद रखें - हमेशा उपयोगकर्ता के बारे में सोचें

[10 9] Generate - the conference for web designers [2 9]

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

अपनी बात में वह संभावनाओं की एक विस्तृत श्रृंखला दिखाने जा रही है कि सीएसएस सीएसएस का उपयोग करके अपने यूआई के समग्र उपयोगकर्ता अनुभव को बेहतर बनाने के लिए प्रदान करता है (एसवीजी और जेएस के छिड़काव और वहां और वहां)। [2 9]

सुनिश्चित करें कि आप याद नहीं करते हैं। अब अपना टिकट प्राप्त करें। [2 9]

संबंधित आलेख: [2 9] [13 9]

  • जावास्क्रिप्ट के साथ एक wobbly पाठ प्रभाव बनाएँ
  • एक चमकते नीयन पाठ प्रभाव बनाएँ
  • पाठ को पूरी तरह से प्रस्तुत करने के लिए कैसे करें

    • कैसे करना है - सर्वाधिक लोकप्रिय लेख

    लौ चित्रकार के साथ शुरू करें

    कैसे करना है Feb 7, 2026

    लौ पेंटर एक स्टैंडअलोन पेंट और कण प्रभाव पैकेज है जो आपको मूल चित्रों, हल�..

    How to draw Asuka from Neon Genesis Evangelion

    कैसे करना है Feb 7, 2026

    (छवि क्रेडिट: पॉल क्वोन) [1 9] बनाना चरित्र ड�..

    How to create 3D grass

    कैसे करना है Feb 7, 2026

    3 डी घास विभिन्न तरीकों से बनाई जा सकती है और किसी �..

    Use Chart.js to turn data into interactive diagrams

    कैसे करना है Feb 7, 2026

    2 का पृष्ठ 1: चार्ट.जेएस का उपयोग करना: चरण..

    Create clouds with FumeFX for 3ds Max

    कैसे करना है Feb 7, 2026

    यह चरण-दर-चरण मार्गदर्शिका यथार्थवादी बादलों के �..

    Create a multi-exposure image with Adobe CC

    कैसे करना है Feb 7, 2026

    एडोब ने मुझे बहुउंडलवाद की अवधारणा को व्यक्त करने के लिए एक उदाहरण बनाने ..

    How to prototype a mobile app with Adobe XD

    कैसे करना है Feb 7, 2026

    यह ट्यूटोरियल, आपको दिखा रहा है कि एडोब एक्सडी म..

    How to draw Harley Quinn

    कैसे करना है Feb 7, 2026

    मेरे लिए, डिजिटल की अपील चित्रकारी तकनीक सर�..

    श्रेणियाँ