ایک متحرک 3D متن اثر بنائیں

Sep 12, 2025
کيسے

کھو سے محبت کینیڈا کی طرف سے جام 3. کھوئے ہوئے محبت کے ارد گرد پائیدار جذبات کے بارے میں حقیقی دل کے ساتھ ایک خوبصورت سیاہ، موبائل تیار انٹرایکٹو نظم ہے. The. ویب سائٹ کی ترتیب ایچ ٹی ایم ایل 5 کے ساتھ تعمیر کیا گیا تھا GSAP. لائبریری اس کی حرکت پذیری کی طاقت، اس کی سب سے زیادہ نظریاتی طور پر ہڑتال کی خصوصیات میں سے ایک اس کی متحرک 3D متن ہے جو واقعی زندگی میں کھوئے ہوئے شاعری سے محبت کرتا ہے.

  • انٹرایکٹو 3D نوع ٹائپ اثرات بنائیں

یہ جہنم کے طور پر متاثر کن لگ رہا ہے، اور یہ ایک مشغول بنانے کے لئے اپنے کام میں شامل کرنے کے لئے مشکل نہیں ہے صارف کا تجربہ ؛ یہاں یہ کیسے ہوا ہے.

اپنی اپنی مصروفیت سائٹ بنانا چاہتے ہیں؟ کوشش کریں ویب سائٹ بلڈر آلے، اور صحیح طریقے سے اٹھا کر چیزوں کو آسانی سے چل رہا ہے ویب میزبانی سروس.

Love Lost's 3D text comes right out of the screen at the viewer

محبت کھوئے ہوئے 3D متن ناظرین میں اسکرین سے باہر آتا ہے

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

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

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

02. نظر انداز HTML مواد

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

 & lt؛ آرٹیکل ڈیٹا-متحرک = "منتقل" اور GT؛
  & lt؛ h1 & gt؛ ہیلو وہاں! & lt؛ / h1 & gt؛
& lt؛ / آرٹیکل اور جی ٹی؛

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

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

 ایچ ٹی ایم ایل، جسم {
  پس منظر: # 000؛
  پڈنگنگ: 0؛
  مارجن: 0؛
  رنگ: #fff؛
}

04. حرکت پذیری کنٹینر

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

 [ڈیٹا متحرک = "میں منتقل"] {
  پوزیشن: رشتہ دار؛
  چوڑائی: 100VW؛
  اونچائی: 100vh؛
  دھندلاپن: 1؛
  حرکت پذیری: منتقل 20s لامحدود؛
  متن سیدھا: مرکز؛
  ٹرانسمیشن: گھومنے (20 ڈی جی)؛
}

05. حرکت پذیری کی شروعات

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

 keyframes منتقل {
  0٪ {
  فونٹ سائز: 1em؛
  بائیں: 0؛
  دھندلاپن: 0؛
  ٹیکسٹ شیڈو: کوئی بھی نہیں؛
  }
  *** مرحلہ 6 یہاں
}

06. دیکھنے میں متحرک

By using multiple shadows you can enhance the 3D effect

ایک سے زیادہ سائے کا استعمال کرتے ہوئے آپ 3D اثر کو بڑھا سکتے ہیں

اگلے فریم کو حرکت پذیری کے ذریعہ 10٪ پر رکھا جاتا ہے. یہ فریم مکمل طور پر نظر انداز کرنے کے لئے دھندلاپن کا تعین کرتا ہے، جس کے نتیجے میں متن آہستہ آہستہ دیکھنے میں متحرک ہو. اس کے علاوہ، ایک سے زیادہ سائے نیلے رنگ کے ساتھ شامل ہیں اور رنگ کے ساتھ مختلف رنگ کے اقدار کو متن میں 3D گہرائیوں کے برعکس دینے کے لئے شامل ہیں. 

 10٪
{
  دھندلاپن: 1؛
  ٹیکسٹ شیڈو:
  .2EM -.2EM 4PX #AAA،
  .4EM -.4EM 4PX # 777،
  .6em -.6em 4px # 444،
  .8EM -.8EM 4px # 111؛
}
*** مرحلہ 7 یہاں

07. حرکت پذیری کو حتمی شکل دینا

حتمی فریم 80٪ اور حرکت پذیری کے آخر میں واقع ہوتے ہیں. یہ فونٹ سائز میں اضافہ اور بائیں طرف عنصر کو منتقل کرنے کے لئے ذمہ دار ہیں. نئی ترتیبات متن کی سائے کے لئے متحرک کرنے کے لئے بھی درخواست کی جاتی ہیں، جبکہ فریم 80٪ سے 100٪ سے متن سے باہر متن کو دھکیلتے ہیں. 

80٪ {
  فونٹ سائز: 8em؛
  بائیں: -8em؛
  دھندلاپن: 1؛
}
100٪ {
  فونٹ سائز: 10em؛
  بائیں: -10EM؛
  دھندلاپن: 0؛
  ٹیکسٹ شیڈو:
  .02em -.02em 4px #aaa،
  .04EM -.04 ایم 4px # 777،
  .06em -.06em 4px # 444،
  .08em -.08em 4px # 111؛
}
***

نوٹ: جو بھی پروجیکٹ آپ کو شروع کررہے ہیں، کلاؤڈ اسٹوریج یہ نمٹنے کے لئے ضروری ہے (ہمارا گائیڈ مدد کرے گا).

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

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

  • ایک چمک نیین ٹیکسٹ اثر بنائیں
  • ویب متحرک ڈیبگ کیسے کریں
  • ویب متحرک تصاویر کے لئے کہانی بورڈ بنائیں

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

ونڈوز، میکوس اور لوڈ، اتارنا Android کے لئے ویب اطلاعات کو کیسے بند کرنا

کيسے Sep 12, 2025

(تصویری کریڈٹ: مستقبل) اگر آپ باقاعدگی سے ویب صارف ہیں، تو آپ کو ک�..

Gatsby کے ساتھ بلاگنگ سائٹ کی تعمیر کیسے کریں

کيسے Sep 12, 2025

فریم ورک جیسے ہی ردعمل صرف گاہکوں کو جاوا سکرپٹ نیچے بھیجتا ہے، جو اس کے..

HTML5 پر فلیش گیمز تبدیل کریں

کيسے Sep 12, 2025

فلیش آہستہ آہستہ ایچ ٹی ایم ایل 5 اور جاوا اسکرپٹ کے حق میں ایڈوب کی طرف �..

ایک غلط ساختہ کیسے درست کرنے کے لئے

کيسے Sep 12, 2025

میں نے گزشتہ سال اس وقت کے ارد گرد اپنے اصل پینٹنگ کو پیدا کیا، جس میں Dongbiao Lu اور Rusking Gao جیسے فنکاروں کی طرف..

وی رے کے ساتھ سکریٹر درخت

کيسے Sep 12, 2025

آپ کے منظر میں تفصیلات شامل کرنا ہمیشہ آپ کے پاس جانے کا راستہ ہے جب آپ ا..

60 سیکنڈ میں فوٹوشاپ کے ساتھ ایک سینماگراف بنائیں

کيسے Sep 12, 2025

چاہے آپ ایک نئی مہارت اٹھا سکتے ہیں لیکن اس وقت بیٹھنے اور سیکھنے کا وقت تلاش نہیں کر سکتے ہیں؟ ایڈوب کی ..

زبرش میں ایک مخلوق کو مجسم کرنے کے لئے اوپر کی تجاویز

کيسے Sep 12, 2025

زبرش میں ایک مخلوق کی تعمیر کا مظاہرہ کرنے کے لئے میں اس ٹکڑے کا استعمال..

نوع ٹائپ کی طرز اور مادہ کو دریافت کریں

کيسے Sep 12, 2025

فیصلے، فیصلے، فیصلے ... اگر قسم کے ساتھ کام کرنے کے عمل کے عمل میں ایک اہم پہلو ہے تو یہ ہے کہ ڈیزائنر یا ٹائ�..

اقسام