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

Feb 2, 2026

کيسے

کھو سے محبت کینیڈا کی طرف سے جام 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 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

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

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

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

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

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

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

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

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

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

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

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

میگا چہرے ڈرائنگ کے لئے 17 تجاویز

فوٹوشاپ میں جھرنا کیسے ہٹانے کے لئے

انفینٹی ڈیزائنر: برآمد کار استعمال کرنے کے لئے کس طرح

zbrushcore کے polypaint کے آلے کے ساتھ ایک 3D میش پر پینٹ

ایکس ذرات کے ساتھ پودوں کو بڑھانے کے لئے سیکھیں

پرانے ماسٹرز کی طرح ایک پورٹریٹ پینٹ

Illustrator میں علامت (لوگو) بنائیں

Blender میں شاندار tileable بناوٹ بنائیں

اقسام