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

مواد

• 01. اپنے صفحے کے باڈی ٹیگ میں کوڈ شامل کریں
• 02. اسٹائل اسٹائل
• 03. خرابی کی نمائش
• 04. سب کچھ پکڑو
• 05. خرابی چل رہا ہے
• 06. معمول پر واپس جائیں
• ابھی نیو یارک کو جنریٹ کریں کے لئے اپنا ٹکٹ حاصل کریں

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

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

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

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

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

01. اپنے صفحے کے باڈی ٹیگ میں کوڈ شامل کریں

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

div id = "ہولڈر" onmouseover = "glitch ()"> div id = "خرابی" </ div> WEB br> PRODUCT- BR> ION / div>

02. اسٹائل اسٹائل

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

باڈی {پس منظر: # 000؛ فونٹ فیملی: ’’ ورکس سانس ‘‘ ، سنس سیرف۔ رنگ: # ایف ایف؛ hold # ہولڈر {فونٹ سائز: 6 ایم؛ چوڑائی: 500px؛ اونچائی: 300px؛ مارجن: 0 آٹو؛ پوزیشن: رشتہ دار؛ }

03. خرابی کی نمائش

خرابی کا اثر ایک بیک گراونڈ امیج ہونے جا رہا ہے جو متن کے اوپری حصے میں براہ راست رکھا گیا ہے۔ یہاں اہم حصہ یہ ہے کہ اسے غیر واضح کو صفر تک کم کرکے بنایا گیا ہے تاکہ جب تک صارف متن کے ساتھ بات چیت نہ کرے تب تک یہ ظاہر نہیں ہوتا ہے۔

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

04. سب کچھ پکڑو

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

var gl = document.getElementById ("خرابی")؛ var over = false؛

05. خرابی چل رہا ہے

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

فنکشن خرابی () {if (over == غلط) {gl.style.opacity = "1"؛ سیٹ ٹائم آؤٹ (فنکشن () {نارمل ()؛}، 1500)؛ }

06. معمول پر واپس جائیں

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

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

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

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

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