ایک متحرک بھاپ ٹیکسٹ اثر بنائیں

Sep 14, 2025
کيسے
Steam text effect

متن میں اثرات شامل کرنے میں مصروفیت اور دلچسپی کا ایک مکمل نئی سطح شامل کر سکتا ہے. اثرات جیسے کنوتی نوع ٹائپ ایک ناظرین کی توجہ، امداد پر قبضہ کرے گا صارف کا تجربہ اور اس کہانی کو بتانے میں مدد ملتی ہے. اس پر متن کا اثر حیرت کرو سائٹ لاتا ہے ویب فونٹ لائن کی طرف سے توجہ مرکوز لائن میں. اسی طرح تلاش کرنے کے لئے کس طرح تلاش کرنے کے لئے پڑھیں.

حاصل کرو پروجیکٹ فائلوں اس ٹیوٹوریل کی پیروی کرنے میں مدد کے لئے.

01. ایچ ٹی ایم ایل دستاویز شروع کریں

پہلا قدم دستاویز کی ساخت کی وضاحت کرنا ہے جو ایچ ٹی ایم ایل کے مواد کو ذخیرہ کرے گا. اس میں دستاویز کنٹینر شامل ہے، جو سر اور جسم کے حصوں کو ذخیرہ کرتا ہے. جبکہ سر سیکشن خارجہ سی ایس ایس اور جاوا اسکرپٹ وسائل میں سیاہی اسٹور کرتا ہے، جسم کو 02 میں پیدا ہونے والی نظر آنے والی مواد کو ذخیرہ کرتا ہے. 

 ​​اور ایل ٹی؛! DOCTYPE ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ سر اور جی ٹی؛
& lt؛ عنوان اور GT؛ بلور ٹیکسٹ اور ایل ٹی؛ / عنوان اور جی ٹی؛
& lt؛ لنک REL = "Stylesheet" کی قسم = "ٹیکسٹ / سی ایس ایس" href = "styles.css" / & gt؛
& lt؛ سکرپٹ SRC = "Code.js" & gt؛ & lt؛ / script & gt؛
& lt؛ / سر اور جی ٹی؛
& lt؛ جسم اور جی ٹی؛
  *** مرحلہ 2
& lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛

02. ایچ ٹی ایم ایل مواد

یہ قدم نظر انداز HTML مواد کی وضاحت کرتا ہے. اس بات کا نوٹ کریں کہ کس طرح کے نصوص کو دھندلا اثر کرنے کے لئے نامزد کیا گیا ہے اس کے کنٹینر کے اندر اندر موجود ہیں جو 'دھندل' کلاس ہے. یہ کلاس جاوا اسکرپٹ کی طرف سے استعمال کیا جاتا ہے 03 مرحلے میں ٹیکسٹ اشیاء، اور بعد میں سی ایس ایس کی طرف سے بعد میں اقدامات میں. 

 ​​& lt؛ h2 & gt؛
  نظم و ضبط سے آتا ہے
  & lt؛ UL کلاس = "دھندلا" اور جی ٹی؛
  & lt؛ لی اور جی ٹی؛ عزم اور ایل ٹی؛ / لی اور جی ٹی؛
  & lt؛ لی اور جی ٹی؛ صبرات اور ایل ٹی؛ / لی اور جی ٹی؛
  & lt؛ لی & gt؛ وقفے اور لیفٹیننٹ؛ / لی اور جی ٹی؛
  & lt؛ لی اور جی ٹی؛ ٹریننگ اور ایل ٹی؛ / لی اور جی ٹی؛
  & lt؛ لی & gt؛ aspiration & lt؛ / li & gt؛
  & lt؛ لی اور جی ٹی؛ تعلیم اور لیفٹیننٹ؛ / لی اور جی ٹی؛
  & lt؛ / ul & gt؛
& lt؛ / h2 & gt؛

03. خود کار طریقے سے حرکت پذیری تاخیر

'code.js' کہا جاتا ہے ایک نئی فائل بنائیں. دھندلا کنٹینر کے اندر ہر چیز کو پچھلے شے کے بعد تین سیکنڈ پیش کرنا ہے. جاوا اسکرپٹ کو منفرد سی ایس ایس کی صفات کی درخواست کو خودکار کرنے کے لئے استعمال کیا جاتا ہے. اس کا پہلا مرحلہ بلور کنٹینر کے اندر سب سے پہلے درجے کی اشیاء کو منتخب کرنا ہے - صفحہ لوڈ کرنے کے بعد. 

 ونڈو. ایڈوانٹ لسٹینر ("لوڈ"، فنکشن () {
  var nodes = دستاویز.querySelectorall (". بلور اور جی ٹی؛ *")؛
  *** مرحلہ 4
})؛

04. سیکنڈ کی تعداد

ایک 'کے لئے لوپ کا حوالہ دینے کے لئے استعمال کیا جاتا ہے ہر چیز کو پچھلے مرحلے میں' نوڈس 'متغیر میں واپس آ گیا ہے. 'کے لئے لوپ کے انڈیکس کاؤنٹر حرکت پذیری تاخیر کی خاصیت کو تفویض کرنے کے لئے سیکنڈ کی تعداد کا حساب کرنے کے لئے استعمال کیا جاتا ہے. نتیجے کے طور پر، ہر چیز میں تاخیر ہے جو پچھلے شے سے زیادہ تین سیکنڈ تک ہے. 

 کے لئے (var i = 0؛ i & lt؛ nodes.lugh؛ i ++) {
  نوڈس [i] .style.animationdelay = (i * 3) + "s"؛
}

05. سی ایس ایس بلور

'styles.css' نامی ایک نئی فائل بنائیں. سی ایس ایس پریزنٹیشن کے قواعد کی وضاحت کرنے کا پہلا مرحلہ پوشیدہ طور پر ہر ایک متن اشیاء کو شروع کرتا ہے. 'حرکت پذیری بلیور' نامی ایک حرکت پذیری بھی لاگو کیا جاتا ہے کہ اشیاء کو پانچ سیکنڈ کی مدت میں دیکھنے میں متحرک کرے گا. حرکت پذیری موڈ کو 'فارورڈز' کو مقرر کیا جاسکتا ہے تاکہ یہ اس کے آخری فریم پر رکھے. 

 .blur & gt؛ * {
  دھندلاپن: 0؛
  حرکت پذیری: Animateblur 5s فارورڈز؛
}

06. حرکت پذیری شروع کریں

مرحلہ 5 میں 'بلور' عناصر پر لاگو حرکت پذیری اس مرحلے میں بیان کی گئی ہے. 'حرکت پذیری بلور' کا حوالہ ایک keyframes حرکت پذیری کے طور پر بنایا جاتا ہے. پہلا فریم 'سے' ایک متن سائے کے ساتھ نظر آنے والے عناصر کو مقرر کرتا ہے - لیکن شفاف متن کے رنگ کے ساتھ. یہ وہی ہے جو دھندلا ٹیکسٹ اثر پیدا کرتا ہے. 

 keyframes animateblur {
  {
  دھندلاپن: 1؛
  متن سائے: 0 0 1EM RGBA (0،0،0،5، 5)؛
  رنگ: آر جی بی اے (0،0،0،0)؛
  }
    *** مرحلہ 7
}

07. حتمی حرکت پذیری فریم

حرکت پذیری کے اندر 'فریم' فریم حتمی فریم کی وضاحت کرتا ہے کہ متن متحرک ہو جائے گا. یہ فریم متن کی سائے کو غائب کرنے کے لئے مقرر کرتا ہے، ایک متن کا رنگ مکمل طور پر نظر آتا ہے. مرحلہ 06 کے ساتھ مل کر، 'سے' اور 'سے' اور 'سے' کے درمیان حرکت پذیری کے فریم براؤزر کی طرف سے حساب کی جائے گی. 

 {
  دھندلاپن: 1؛
  ٹیکسٹ شیڈو: 0 0px RGBA (0،0،0،0)؛
  رنگ: # 000؛
}

یہ مضمون اصل میں ویب ڈیزائنر میگزین میں شائع ہوا. یہاں سبسکرائب کریں .

یاد رکھیں - ہمیشہ صارف کے بارے میں سوچتے ہیں

Generate - the conference for web designers

جب صفحے پر فینسی اثرات متعارف کرایا تو اسے ایک مقصد کی ضرورت ہے، آپ کو صارف کے تجربے کے بارے میں سوچنا ہوگا.اور یہ وہی ہے جو فری لانس فرنٹ کے آخر میں UI ڈویلپر سارہ سوویدان اس میں انکشاف کیا جائے گا 'سی ایس ایس (اور SVG) کا استعمال کرتے ہوئے UX' بات چیت کے لئے لندن 2018 پیدا کریں .

اس کی بات میں وہ امکانات کی وسیع اقسام کو دکھانے کے لئے جا رہے ہیں جو سی ایس ایس آپ کے UI کے مجموعی صارف کے تجربے کو بہتر بنانے کے لئے پیش کرتا ہے، سی ایس ایس کا استعمال کرتے ہوئے (SVG اور جے ایس ایس کے چھڑکاو کے ساتھ اور وہاں).

اس بات کو یقینی بنائیں کہ آپ کو یاد نہیں ہے. اب اپنا ٹکٹ حاصل کرو.

متعلقہ مضامین:

  • جاوا اسکرپٹ کے ساتھ ایک wobbly ٹیکسٹ اثر بنائیں
  • ایک چمک نیین ٹیکسٹ اثر بنائیں
  • متن کو کس طرح مکمل طور پر فراہم کرنا ہے

کيسے - انتہائی مشہور مضامین

فوٹوشاپ میں رنگا رنگ حرکت پذیری آرٹ کیسے پینٹ

کيسے Sep 14, 2025

اس فوٹوشاپ ٹیوٹوریل کے دوران، میں کئی کلیدی تصورات پر جا رہا ہوں جو میں ..

Get started with Assets in Affinity Designer

کيسے Sep 14, 2025

جب اے پی پی ڈیزائن یا برانڈنگ کے منصوبوں پر کام کرنے پر کام کرنا، یہ ضرو�..

3D ماڈلز کے لئے آسان پھانسی کی تکنیک

کيسے Sep 14, 2025

میں گزشتہ چند برسوں کے لئے ایک حرکت پذیری ڈائریکٹر رہا ہوں اور بہت سے حر..

ماسٹر طریقہ کار ماڈلنگ

کيسے Sep 14, 2025

اگلے وقت آپ ایک شہر میں ہیں، اس طرح کی جانچ پڑتال کریں کہ جدید عمارات کی ..

ایڈوب XD کے ساتھ ایک موبائل ایپ پروٹوٹائپ کیسے کریں

کيسے Sep 14, 2025

یہ سبق، آپ کو ایڈوب ایکس ڈی میں موبائل ایپ پروٹوٹائپ بنانے کے لئے کس �..

ایمیزون Lumberyary میں شروع کریں: سیٹ اپ

کيسے Sep 14, 2025

ایمیزون کا نیا گیم انجن، لکڑی آنگن کھیل اور اثاثہ تخلیق میں بہب..

آپ کے ورڈپریس ویب سائٹ بہزبانی بنانے کے لئے کس طرح

کيسے Sep 14, 2025

انٹرنیٹ پر استعمال ہونے والے سب سے اوپر 10 زبانوں میں، انگریزی سب سے..

تخلیقی طور پر پورٹریٹ اور چہرے سے آگاہی کے ساتھ تخلیق کریں

کيسے Sep 14, 2025

ہمارے پاس سبھی فوٹوشاپ میں شراب کے آلے کے ساتھ ایک کھیل تھا، لیکن فوٹوش�..

اقسام