اپنی ویب سائٹ پر ایک چمک اثر شامل کریں

Sep 13, 2025
کيسے

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

  • ویب حرکت پذیری: کوئی کوڈ کی ضرورت نہیں

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

فائلوں کو ڈاؤن لوڈ کریں اس سبق کے لئے.

01. آپ کے صفحے کے جسم ٹیگ میں کوڈ شامل کریں

Vintage's glitch effect is easy to reproduce if you know its secret

اگر آپ اس کے راز کو جانتے ہیں تو ونٹیج کا چمک اثر دوبارہ پیدا کرنا آسان ہے

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

 & lt؛ div id = "ہولڈر" onmouseover = "glitch ()" & gt؛
  & lt؛ div id = "glitch" & gt؛ & lt؛ / div & gt؛
  ویب
  & lt؛ br & gt؛ پروڈکٹ -
  & lt؛ br & gt؛ آئن
& lt؛ / div & gt؛

02. ڈسپلے اسٹائل

یہ مواد کسی خاص قسم کے فانٹ کا استعمال کرے گا جس میں کام سینسر کہتے ہیں. وہاں سے لنک پکڑو اور اسے اپنے سر سیکشن میں رکھیں؛ پھر سی ایس ایس کو سٹائل ٹیگ یا علیحدہ سی ایس ایس فائل میں شامل کریں. یہ صفحہ سفید متن کے ساتھ سیاہ بنا دیا گیا ہے اور ہولڈر متن کے لئے تیار کیا جاتا ہے. 

 جسم {
  پس منظر: # 000؛
  فونٹ-خاندان: 'کام سینس'، سینسر سیرف؛
  رنگ: #fff؛
}
# ہولڈر {
  فونٹ سائز: 6em؛
  چوڑائی: 500px؛
  اونچائی: 300px؛
  مارجن: 0 آٹو؛
  پوزیشن: رشتہ دار؛
}

03. glitch نمائش

گلیچ اثر ایک پس منظر کی تصویر بنتی ہے جو براہ راست متن کے سب سے اوپر پر رکھا جاتا ہے. یہاں اہم حصہ یہ ہے کہ یہ صفر تک دھندلاپن کو کم کرنے کی طرف سے پوشیدہ بنا دیا ہے تاکہ جب تک صارف متن کے ساتھ بات چیت نہیں کرے. 

 #glitch {
  پوزیشن: مطلق؛
  اوپر: 0؛
  بائیں: 0؛
  Z-index: 10؛
  چوڑائی: 100٪؛
  اونچائی: 100٪؛
  پس منظر: یو آر ایل (glitch.gif)؛
  دھندلاپن: 0؛
}

04. سب کچھ پکڑو

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

 var gl = docoutel.getelementbyid ("glitch")؛
var over = غلط؛

05. گلیچ چل رہا ہے

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

 فنکشن گلیچ () {
  اگر (اوپر == غلط) {
  gl.style.opacity = "1"؛
  ترتیب (فنکشن () {
  عمومی ()؛
  }، 1500)؛
  }
}

06. واپس عام طور پر

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

 فنکشن عمومی () {
  gl.style.opacity = "0"؛
}

نیو یارک اب پیدا کرنے کے لئے اپنا ٹکٹ حاصل کریں

تین دن ویب ڈیزائن کی تقریب نیویارک پیدا واپس آگیا ہے. 25-27 اپریل 2018 کے درمیان ہونے والی، عنوان کے اسپیکرز میں سپر دوستی کے ڈین مال، ویب حرکت پذیری کنسلٹنٹ ویل سر، مکمل اسٹیک جاوا اسکرپٹ ڈویلپر WES BOS اور زیادہ شامل ہیں. ورکشاپس اور قیمتی نیٹ ورکنگ کے مواقع کا مکمل دن بھی ہے - اسے یاد نہ کرو. اب آپ کی پیدا کردہ ٹکٹ حاصل کریں .

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

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

  • ان پیچیدہ تصویر فلٹرز کے ساتھ گلیچ آرٹ بنائیں
  • جاوا اسکرپٹ کے ساتھ متحرک SVG
  • 10 عظیم سی ایس ایس حرکت پذیری وسائل

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

فوٹوشاپ میں کہانی بورڈ کس طرح

کيسے Sep 13, 2025

(تصویری کریڈٹ: مارک ایون لیم) فوٹوشاپ میں کہانی بورڈنگ آپ کے خیال�..

artrage 6 سے زیادہ حاصل کریں: آپ کے کام کے بہاؤ کو فروغ دینے کے لئے اوپر کی تجاویز

کيسے Sep 13, 2025

(تصویری کریڈٹ: اسٹیو گولڈ) اس آرٹیکل میں میں آرچرج پر مشورہ اور بص..

ایک انٹرایکٹو Parallax تصویر بنائیں

کيسے Sep 13, 2025

Parallax طومار اب کوئی ضمانت کی توجہ نہیں ہے، اس کا استعمال کیا جاتا ہے، لیکن آپ..

ڈاز سٹوڈیو اور زبرش کے درمیان کیسے منتقل

کيسے Sep 13, 2025

نئے آنے والوں کے لئے زبرش ، انٹرفیس دوسرے 3D ماڈلنگ پروگراموں کے..

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

کيسے Sep 13, 2025

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

آپ کے آرٹ کی معیار ڈیجیٹل کاپیاں بنائیں

کيسے Sep 13, 2025

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

آپ کے ڈیزائن کے کام کے اندر تخلیقی طور پر اسٹاک فوٹوگرافی کا استعمال کیسے کریں

کيسے Sep 13, 2025

آخری ریزورٹ ہونے کے بجائے، اسٹاک کی تصویر آپ کو تخلیقی ہتھیاروں کا ایک �..

آپ کے 3D رینڈرز میں تحریک پر قبضہ کیسے کریں

کيسے Sep 13, 2025

ایک آزاد فنکار ہونے کی وجہ سے میں مختلف قسم کے چھوٹے منصوبوں پر کام کرتا..

اقسام