سی ایس ایس کے ذریعہ اسمارٹ ٹیکسٹ ایفیکٹس کو کوڈ کیسے کریں

مواد

• 01. رول اوور ٹیکسٹ اثر
• 02. سی ایس ایس تشکیل دیں
• 03. لفظ کی پوزیشن
• 04. اوپر اور زیادہ
• 05. نیچے منڈانا
• 06. لوگوں کے لئے خودکار
• 07. متبادل کلاسیں شامل کریں

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

اس مضمون میں ، ہم آپ کو دکھاتے ہیں کہ آپ کی ویب سائٹ پر اثر کو دوبارہ کیسے بنایا جائے۔ مزید حوصلہ افزائی کے ل CSS ، سی ایس ایس کے بہترین انیمیشن مثالوں کے بارے میں ہماری گائیڈ پر ایک نگاہ ڈالیں (ان کوڈ دینے کے طریقوں کے ساتھ)۔ کچھ مختلف چیزوں کے ل a ، کسی اعلی ویب سائٹ بلڈر یا ہمارے بہترین کلاؤڈ اسٹوریج کو منتخب کرنے کی کوشش کریں۔ اور اگر آپ اپنی سائٹ کو مزید پیچیدہ بنا رہے ہیں تو ، اس بات کو یقینی بنائیں کہ آپ کی ویب ہوسٹنگ اہم ہے۔

01. رول اوور ٹیکسٹ اثر

مڈل چائلڈ ویب سائٹ پر ایک زبردست ٹیکسٹ ایفیکٹس مینو کے رول اوور ایفیکٹس کے لئے ہے ، جہاں ٹیکسٹ پر حرف الگ ہوجاتے ہیں اور قدرے گھومتے ہیں۔ اس کو کچھ آسان HTML ٹیگس سے شروع کریں۔

div> div> ناشتہ / تقسیم </ div>

02. سی ایس ایس تشکیل دیں

مندرجہ ذیل سی ایس ایس اصولوں کو شامل کرنے کے لئے علیحدہ سی ایس ایس فائل یا اسٹائل ٹیگز کا استعمال کریں اور باڈی کو یقینی بناتے ہوئے پیج کو براؤزر کے پورے سائز کو بھرنے کے ل make بنائیں اور ریپر مکمل اونچائی کو دستیاب رکھیں۔

جسم {چوڑائی: 100؛؛ اونچائی: 100؛؛ مارجن: 0؛ بھرتی: 0؛ w. ریپر {ڈسپلے: گرڈ؛ اونچائی: 100؛؛ }

03. لفظ کی پوزیشن

لفظ کلاس گرڈ میں لفظ کو مرکز کرتی ہے۔ کوئی بھی متن جو دیا گیا ہے لفظ کلاس اس کا اطلاق کر سکتی ہے۔ اوپر کلاس کا اطلاق ہر دوسرے خط پر ہوگا اور یہ اوپر کی طرف بڑھ جائے گی۔

. لفظ {فونٹ سائز: 3 ایم؛ مارجن: آٹو آٹو؛ word. لفظ. اپ {ڈسپلے: ان لائن بلاک؛ ٹرانسفارم: transte3d (0 px، 0 px، 0 px) گھومیں (0deg)؛ منتقلی: تمام 0.5s آسانی سے باہر؛ }

04. اوپر اور زیادہ

اب نیچے کلاس حص similarے میں بہت ملتی جلتی ترتیبات ہے اوپر لیکن ہوور کے لئے تحریک کو اوپر کی طرف ظاہر کرتا ہے اوپر رول اوور نظر کو بڑھانے کے لئے اوپر کی طرف بھی تھوڑا سا گھمایا جاتا ہے۔

. لفظ. نیچے {ڈسپلے: ان لائن بلاک؛ ٹرانسفارم: transte3d (0 px، 0 px، 0 px) گھومیں (0deg)؛ منتقلی: تمام 0.5s آسانی سے باہر؛ word. مطلوبہ الفاظ: ہوور. اپ؛ ٹرانسفارم: ٹرانسلیٹ 3 ڈی (0 پی ایکس ایکس، -8 پی پی ایکس، 0 پی ایکس) گھماؤ (12 ڈیک)؛ رنگین: # 058b05}

05. نیچے منڈانا

جب صارف متن پر گھومتا ہے تو ، نیچے کی کلاس متن کو نیچے کی طرف لے جاتی ہے۔ بعد میں جاوا اسکرپٹ میں کلاس کو الگ الگ اسپین میں تقسیم کردیا جائے گا اور کلاسوں کو خود بخود متبادل اسپینوں میں شامل کیا جائے گا۔

. مطلوبہ الفاظ: ہوور. ڈاون {ٹرانسفارم: ٹرانسلیٹ 3 ڈی (0 پکس، 8 پکس، 0 پی ایکس) گھماؤ (-12 ڈیک)؛ رنگ: # 058b05؛ }

06. لوگوں کے لئے خودکار

یہ ایک پریشانی کی بات ہے کہ ہر خط کو مختلف کلاسوں کے ساتھ باری باری پھیلانے میں ڈالنا پڑتا ہے ، لہذا ہم سلیکٹر سے پوچھ گچھ کرنے کے لئے جاوا اسکرپٹ حاصل کرکے عمل کو خود کار بنائیں گے اور ہر ایک خط لیں گے۔ یہاں str متغیر موجودہ حرف کو پکڑتا ہے کیونکہ یہ متن کے ذریعے لوپ ہوجاتا ہے۔

اسکرپٹ> var عناصر = دستاویز.کوئری سلیکٹراللہ (’. ورڈ‘)؛ (var i = 0، l = તત્વો کی لمبائی؛ i l؛ i ++) {var str = عناصر [i]. متن متن؛ عناصر [i] .innerHTML = ’’؛

07. متبادل کلاسیں شامل کریں

اب ایک اور لوپ ہر حرف کو اپنی اپنی مدت کے عنصر میں رکھتا ہے اور یا تو اسے جوڑتا ہے اوپر یا نیچے کلاس میں پھیلی ہوئی ہے۔ اگر آپ براؤزر میں اس کو دیکھیں گے تو آپ کو ہر حرف کے اوپر نیچے نیچے متن تقسیم ہوتا ہوا نظر آئے گا ، جبکہ تھوڑا سا گھومتے ہوئے۔

آپ مڈل چائلڈ ویب سائٹ پر عمل میں اثر دیکھ سکتے ہیں۔

کے لئے (var j = 0، ll = str.leight؛ j ll؛ j ++) {var spn = دستاویز. کریٹیلیمنٹ (’اسپین‘)؛ عناصر [i] .appendChild (spn)؛ spn.textContent = str [j]؛ چلو pos = (j٪ 2)؟ 'اوپر نیچے'؛ spn.classList.add (pos)؛ } script / اسکرپٹ>

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