میں نے اپنے سائیڈ پروجیکٹ کو ایک ماسکوٹ دیا
مجھے جاپانی kaomoji بہت پسند ہیں۔ یہ چھوٹے چھوٹے چہرے پیغام میں اپنائیت پیدا کرتے ہیں۔
انہیں تلاش کرنے کے لیے زیادہ تر ویب سائٹس پرانی محسوس ہوتی ہیں۔ ان کے صفحات بھرے ہوئے اور بہت زیادہ اشتہارات سے پُر ہوتے ہیں۔ میں کچھ مختلف بنانا چاہتا تھا۔ میں ایک ایسی ڈیجیٹل دکان بنانا چاہتا تھا جو زندہ اور پرکشش محسوس ہو۔
چنانچہ میں نے Nyamoji بنائی۔ وہ ایک چھوٹا سا ماسکوٹ ہے جو پیج پر رہتی ہے۔ وہ آپ کے کرسر کا پیچھا کرتی ہے، پلک جھپکاتی ہے، اور سانس لیتی ہے۔
ایسا کرنے کے لیے آپ کو بھاری لائبریریز کی ضرورت نہیں ہے۔ آپ کو صرف سادہ SVG، ایک pointermove ایونٹ، اور کچھ CSS کی ضرورت ہے۔
یہاں بتایا گیا ہے کہ میں نے اسے زندہ کیسے محسوس کروایا:
• آنکھوں کی حرکت (The Eye Movement)
میں ایک ہی pointermove لسنر استعمال کرتا ہوں۔ میں اس کے چہرے سے آپ کے کرسر تک کی سمت کا حساب لگاتا ہوں۔ پھر میں اس کی آنکھوں کو اس سمت میں تھوڑا سا حرکت دیتا ہوں۔
میں نے یہاں دو اسباق سیکھے۔ پہلا یہ کہ میں عمودی حرکت (vertical movement) کو 85 فیصد تک محدود رکھتا ہوں۔ اگر اس کی آنکھیں بہت زیادہ اوپر نیچے ہوں گی، تو وہ خوفناک لگے گی۔ دوسرا یہ کہ میں ایک چھوٹا سا CSS transition شامل کرتا ہوں۔ اس کے بغیر، اس کی آنکھیں ایک روبوٹ کی طرح جھٹکے لیتی ہیں۔ اس کے ساتھ، وہ ہموار طریقے سے حرکت کرتی ہیں۔
• پلک جھپکانے کا حل (The Blinking Fix) شروع میں، میرے پیج پر موجود ہر ماسکوٹ ایک ہی وقت میں پلک جھپکاتی تھی۔ یہ ایک خرابی (glitch) کی طرح لگتا تھا۔ میں نے ہر ماسکوٹ میں ایک رینڈم اینیمیشن ڈیلے (random animation delay) شامل کر کے اسے ٹھیک کیا۔ اب وہ ہر ایک اپنے مقررہ وقت پر پلک جھپکاتی ہے۔
• کیچ لائٹ (The Catchlight) میں نے ہر آنکھ میں ایک چھوٹا سا سفید نقطہ شامل کیا۔ یہ چھوٹی سی تفصیل ایک ڈرائنگ اور ایک کردار کے درمیان فرق پیدا کرتی ہے۔ اس سے ایسا لگتا ہے جیسے وہ آپ کو دیکھ رہی ہے۔
• صارفین کا احترام (Respecting Users)
حرکت توجہ بھٹکا سکتی ہے۔ میں prefers-reduced-motion میڈیا کوئری استعمال کرتا ہوں۔ اگر کوئی صارف کم حرکت چاہتا ہے، تو میں تمام اینیمیشنز فوری طور پر روک دیتا ہوں۔
• لے آؤٹ شفٹ سے بچنا (Avoiding Layout Shift) میں ماسکوٹ کا چہرہ براہ راست HTML میں لکھتا ہوں۔ اگر میں کوئی خالی پلیس ہولڈر (placeholder) استعمال کروں، تو JavaScript لوڈ ہوتے وقت پیج جھٹکا لیتا ہے۔ شروع سے ہی اسے HTML میں لکھنے سے پیج مستحکم رہتا ہے۔
کوئی چھوٹی اور ذاتی چیز بنانا پروجیکٹ کو منفرد بناتا ہے۔
آپ اسے Kaomojikan پر دیکھ سکتے ہیں۔