मैंने अपने साइड प्रोजेक्ट को एक मैस्कॉट दिया
मुझे जापानी kaomoji बहुत पसंद हैं। ये छोटे-छोटे चेहरे संदेश में गर्माहट भर देते हैं।
उन्हें खोजने वाली अधिकांश वेबसाइटें पुरानी लगती हैं। उनके पेज बहुत भरे हुए होते हैं और उनमें बहुत सारे विज्ञापन होते हैं। मैं कुछ अलग बनाना चाहता था। मैं एक ऐसी डिजिटल शॉप बनाना चाहता था जो जीवंत और आत्मीय लगे।
इसलिए मैंने Nyamoji बनाई। वह एक छोटा सा मैस्कॉट है जो पेज पर रहती है। वह आपके कर्सर का पीछा करती है, पलकें झपकाती है और सांस लेती है।
ऐसा करने के लिए आपको भारी libraries की ज़रूरत नहीं है। आपको बस plain SVG, एक pointermove event और कुछ CSS की आवश्यकता है।
यहाँ बताया गया है कि मैंने उसे जीवंत कैसे बनाया:
• आँखों की हलचल मैं एक single pointermove listener का उपयोग करता हूँ। मैं उसके चेहरे से आपके कर्सर तक की दिशा की गणना करता हूँ। फिर मैं उसकी आँखों को उसी दिशा में थोड़ा सा घुमाता हूँ।
यहाँ मैंने दो सबक सीखे। पहला, मैं vertical movement को 85 प्रतिशत तक सीमित रखता हूँ। यदि उसकी आँखें बहुत अधिक ऊपर-नीचे होती हैं, तो वह डरावनी लगती है। दूसरा, मैं एक छोटा CSS transition जोड़ता हूँ। इसके बिना, उसकी आँखें रोबोट की तरह कूदती हैं। इसके साथ, वे सहजता से चलती हैं।
• पलक झपकाने का समाधान शुरुआत में, मेरे पेज पर मौजूद हर मैस्कॉट एक ही समय पर पलकें झपकाती थी। यह एक ग्लिच जैसा लगता था। मैंने प्रत्येक मैस्कॉट में एक random animation delay जोड़कर इसे ठीक किया। अब वे सभी अपने अलग समय पर पलकें झपकाती हैं।
• कैचलाइट (The Catchlight) मैंने प्रत्येक आँख में एक छोटा सा सफेद बिंदु जोड़ा। यह छोटा सा विवरण एक ड्राइंग और एक चरित्र के बीच का अंतर पैदा करता है। इससे ऐसा लगता है जैसे वह आपको देख रही है।
• उपयोगकर्ताओं का सम्मान करना हलचल ध्यान भटका सकती है। मैं prefers-reduced-motion media query का उपयोग करता हूँ। यदि कोई उपयोगकर्ता कम हलचल चाहता है, तो मैं तुरंत सभी animations रोक देता हूँ।
• लेआउट शिफ्ट से बचना मैं मैस्कॉट के चेहरे को सीधे HTML में लिखता हूँ। यदि मैं एक खाली placeholder का उपयोग करता हूँ, तो JavaScript लोड होने पर पेज अचानक कूदता है। शुरुआत से ही इसे HTML में लिखने से पेज स्थिर रहता है।
कुछ छोटा और व्यक्तिगत बनाना किसी प्रोजेक्ट को खास बनाता है।
आप उसे Kaomojikan पर पा सकते हैं।