متحرک ٹائپنگ اثر کیسے بنانا

Sep 11, 2025
کيسے

جب اچھی طرح سے استعمال کیا جاتا ہے، سی ایس ایس حرکت پذیری اپنی سائٹ پر دلچسپی اور شخصیت شامل کر سکتے ہیں. اس آرٹیکل میں، ہم کس طرح متحرک اثر پیدا کرنے کے لۓ چلیں گے جو آپ کی نوع ٹائپ آہستہ آہستہ ظاہر کرے گی، جیسا کہ یہ ٹائپ رائٹر پر ٹائپ کیا جا رہا ہے. آپ سائٹ پر کارروائی میں حرکت پذیری کا ایک مثال دیکھ سکتے ہیں Crypton. ، ایک cryptocurrency ٹریڈنگ بوٹ. اثر متاثر کن ہے اور یہ بھی لاگو کرنا آسان ہے.

مہذب ویب ڈیزائن بنانے کے دیگر آسان طریقوں کے لئے، ایک بہترین کوشش کریں ویب سائٹ بلڈر آلے، یا سب سے اوپر ویب میزبانی سروس. یا، آپ کی اپنی سائٹ پر اس حرکت پذیری کو کیسے حاصل کرنے کے بارے میں معلوم کرنے کے لئے پڑھیں.

  • سی ایس ایس حرکت پذیری کے نئے فرنٹیئر کو تلاش کریں

01. دستاویز کی شروعات

پہلا قدم ویب پیج کی ساخت شروع کرنا ہے. یہ سر اور جسم کے حصوں کو ذخیرہ کرنے کے لئے ذمہ دار ایچ ٹی ایم ایل کنٹینر پر مشتمل ہوتا ہے. جبکہ سر سیکشن کی اہم ذمہ داری بیرونی سی ایس ایس لوڈ کرنا ہے، جسم کا حصہ مرحلہ 2 میں پیدا ہونے والی HTML مواد کو ذخیرہ کرے گا. 

 اور ایل ٹی؛! DOCTYPE ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ ایچ ٹی ایم ایل اور جی ٹی؛
& lt؛ سر اور جی ٹی؛
& lt؛ عنوان اور GT؛ ٹائپنگ اثر اور ایل ٹی؛ / عنوان اور جی ٹی؛
& lt؛ لنک REL = "Stylesheet" کی قسم = "ٹیکسٹ / سی ایس ایس" href = "styles.css" / & gt؛
& lt؛ / سر اور جی ٹی؛
& lt؛ جسم اور جی ٹی؛
*** مرحلہ 2
& lt؛ / جسم اور جی ٹی؛
& lt؛ / ایچ ٹی ایم ایل اور جی ٹی؛

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

ایچ ٹی ایم ایل کے مواد پر مشتمل ایک کنٹینر ہے جو 'ٹائپنگ' کلاس کا استعمال کرتا ہے. یہ کسی بھی بچے کے عناصر کو ٹائپنگ اثر کو لاگو کرنے کے لئے سی ایس ایس کی طرف سے استعمال کیا جائے گا. بچے کے مواد کا عنصر H1 ٹیگ سے بنایا جاتا ہے، لیکن آپ ایک پیراگراف کے طور پر عنصر بنانے کے لئے 'پی' جیسے ایک اور عنصر استعمال کرسکتے ہیں. 

 & lt؛ ڈوی کلاس = "ٹائپنگ" اور جی ٹی؛
  & lt؛ h1 & gt؛ یہاں اپنا عنوان رکھو ... & lt؛ / h1 & gt؛
& lt؛ / div & gt؛

03. سی ایس ایس کی شروعات

'styles.css' کہا جاتا ایک فائل بنائیں. سی ایس ایس کا پہلا مرحلہ دستاویز اور جسم کے کنٹینرز کو کسی بھی نظر آنے والے سرحدی وقفے کے بغیر مکمل براؤزر ونڈو کو پورا کرنے کی وضاحت کرتا ہے. سیاہ صفحہ پس منظر اور سفید ٹیکسٹ رنگوں کے لئے ڈیفالٹ رنگ بھی اس قدم میں قائم ہیں. صفحے کے اندر اندر مواد کے عناصر اس مرحلے میں ان کے پہلے سے طے شدہ رنگ کے طور پر رنگ کا وارث ہوں گے. 

 ​​جسم، ایچ ٹی ایم ایل {
  ڈسپلے: بلاک؛
  چوڑائی: 100٪؛
  اونچائی: 100٪؛
  پس منظر: # 000؛
  رنگ: #fff؛
  پڈنگنگ: 0؛
  مارجن: 0؛
}

04. ٹائپنگ بچوں

ٹائپنگ کنٹینر کے اندر تمام بچوں کو ٹیکسٹ ریپنگ کے استعمال کے بغیر ایک لائن پر ظاہر کرنے کے لئے مقرر کیا جاتا ہے. سب سے زیادہ اہم بات یہ ہے کہ، ان بچے کے عناصر میں 'ٹائپنگ' حرکت پذیری ان پر لاگو ہوتا ہے. یہ حرکت پذیری 50 فریم سنیپشاٹس کے ساتھ پانچ سیکنڈ سے زیادہ کھیلنے کے لئے مقرر کیا جاتا ہے - زبردست ٹائپنگ اثر کی اجازت دیتا ہے. 

. ٹائپنگ اور جی ٹی؛ * {
  چھپا ہوا رساو؛
  وائٹ خلائی: Nowrap؛
  حرکت پذیری: ٹائپنگیم 5S اقدامات (50)؛
}

05. چہرے کی آنکھیں

اثر بھی ایک متحرک چہرہ کے ساتھ ہوتا ہے جو ٹائپ کردہ متن کو بیان کرنے کے لئے ظاہر ہوتا ہے. یہ قدم اس چہرے کی آنکھوں کو ایک سی ایس ایس 'مجازی' عنصر کے طور پر استعمال کرتے ہوئے تخلیق کرتا ہے کے بعد منتخب کنندہ. آنکھوں کو والدین کے متن سے تعلق رکھتا ہے، اس کے مواد کے ساتھ دو ڈاٹ ٹیک متن کے طور پر مقرر کیا جاتا ہے. 

. ٹائپنگ اور جی ٹی؛ * :: کے بعد {
  مواد: ".."؛
  ڈسپلے: بلاک؛
  پوزیشن: مطلق؛
  اوپر: 1em؛
  بائیں: .35em؛
}

06. منہ منہ

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

The. typingspeak. حرکت پذیری لاگو کیا جاتا ہے؛ حرکت پذیری کے دو فریموں کا استعمال کرتے ہوئے یہ 0.5 سیکنڈ تک ختم ہو جائے گا. حرکت پذیری کے ساتھ پانچ گنا بار بار کیا جاتا ہے، کل حرکت پذیری کا وقت 2.5 سیکنڈ ہوگا. 

. ٹائپنگ اور جی ٹی؛ * :: اس سے پہلے {
  مواد: ""؛
  پوزیشن: مطلق؛
  ڈسپلے: بلاک؛
  اوپر: 2.1em؛
  بائیں: .25em؛
  چوڑائی: 1EM؛
  اونچائی: .1em؛
  سرحدی ردعمل: 100٪؛
  پس منظر: #FFF؛
  حرکت پذیری: Typingspeak .5S اقدامات (2)؛
  حرکت پذیری - تکرار-شمار: 5؛
}

07. حرکت پذیری تعریفیں

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

 ​​keyframes typinganim {
  {چوڑائی: 0}
  {چوڑائی: 100٪}
}
keyframes typingspek {
  0٪ {چوڑائی: 1em؛ اونچائی: .1em}
  100٪ {چوڑائی: 1em؛ اونچائی: .5em؛ }
}
***

محفوظ کرنے کیلئے فائلوں کو ڈیزائن کیا گیا ہے؟اپ گریڈ کریں کلاؤڈ اسٹوریج تو یہ کام پر ہے.

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر کے مسئلہ 275 میں شائع کیا گیا تھا. مسئلہ 275 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

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

  • سست UI حرکت پذیری بنائیں
  • سی ایس ایس ڈسپلے پراپرٹی کو سمجھنے
  • ایک متحرک بھاپ ٹیکسٹ اثر بنائیں

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

نقشہ کی مثال: مرحلہ گائیڈ کی طرف سے ایک قدم

کيسے Sep 11, 2025

نقشہ کی مثال گزشتہ چند سالوں میں ایک حقیقی ریگولیشن ہے. خشک گوگل نقشہ کے لئے ایک دلچسپ متبادل، واضح طور پر ..

آپ کے زبرش UI کے ساتھ سمارٹ کام کریں

کيسے Sep 11, 2025

جو کچھ بھی ہمارے دماغ کو حوصلہ افزائی کرتا ہے وہ ہماری پیداوری کو متاثر کرسکتا ہے، اور یہ ضروری ہے کہ عوام�..

آپ کے ماڈلنگ کو تیز کرنے کے 6 طریقے

کيسے Sep 11, 2025

زیادہ موثر کام کے بہاؤ آپ کی رفتار مجسمہ کی تکنیک کو بہتر بنانے کا واضح �..

سنیما 4 ڈی میں کارٹون حروف کیسے بنائیں

کيسے Sep 11, 2025

موبائل کھیل اور انڈیا کی آمد کے ساتھ ویڈیو گیمز ، Illustrators اور حر�..

فوٹوشاپ سی سی میں ایک مشینی طرز تصویر پینٹ

کيسے Sep 11, 2025

اس کے حصے کے طور پر تخلیقی طور پر پوشیدہ خزانے پروجیکٹ، ایڈوب ا�..

InDesign میں کتاب کا احاطہ کیسے بنانا

کيسے Sep 11, 2025

یہ کہہ سکتا ہے کہ 'اس کا احاطہ کی طرف سے ایک کتاب کا فیصلہ نہ کرو'، لیکن ایک کور کا ڈیزائن، حقیقت میں، ایک کت..

ایک اپلی کیشن بنائیں جو سینسر کے اعداد و شمار کو جمع کرتی ہے

کيسے Sep 11, 2025

آج، منسلک مصنوعات کی ترقی کے لئے سستی پلیٹ فارم وسیع پیمانے پر دستیابی �..

ایک متحرک ہیرو کیسے ڈیزائن کرنا

کيسے Sep 11, 2025

مندرجہ ذیل تجاویز ایرک ملر حرکت پذیری اسٹوڈیوز کے آئندہ ویب سیریز کے لئے بینک متحرک کرنے کے لئے میری پروس�..

اقسام