मी माझ्या साईड प्रोजेक्टला एक मस्कॉट दिला
मला जपानी काओमोजी (kaomoji) खूप आवडतात. हे छोटे चेहरे संदेशांमध्ये जिवंतपणा आणतात.
ते शोधण्यासाठी बहुतेक वेबसाइट्स जुन्या वाटतात. त्यांची पाने खूप गर्दीची असतात आणि त्यावर खूप जाहिराती असतात. मला काहीतरी वेगळे बनवायचे होते. मला एक अशी डिजिटल शॉप हवी होती जी जिवंत आणि आपुलकीची वाटेल.
म्हणून मी Nyamoji बनवली. ती एक लहान मस्कॉट आहे जी पेजवर राहते. ती तुमच्या कर्सरचा पाठलाग करते, डोळे मिचकावते आणि श्वास घेते.
हे करण्यासाठी तुम्हाला जड लायब्ररीजची (libraries) गरज नाही. तुम्हाला फक्त साधे SVG, एक pointermove event आणि काही CSS लागेल.
तिला जिवंत वाटण्यासाठी मी काय केले ते खाली दिले आहे:
• डोळ्यांची हालचाल
मी एक सिंगल pointermove listener वापरतो. मी तिच्या चेहऱ्यापासून तुमच्या कर्सरपर्यंतची दिशा मोजतो. त्यानंतर मी तिच्या डोळ्यांना त्या दिशेने हलवतो.
यातून मी दोन गोष्टी शिकलो. पहिले म्हणजे, मी उभ्या हालचालीला (vertical movement) ८५ टक्क्यांपर्यंत मर्यादित ठेवतो. जर तिचे डोळे खूप जास्त वर-खाली हलले, तर ती भीतीदायक (creepy) दिसते. दुसरे म्हणजे, मी एक छोटा CSS transition जोडतो. त्याशिवाय, तिचे डोळे रोबोटसारखे उड्या मारतात. त्यासह, ते सहजपणे सरकतात.
• डोळे मिचकावण्यातील त्रुटी सुधारणे सुरुवातीला, माझ्या पेजवरील प्रत्येक मस्कॉट एकाच वेळी डोळे मिचकावत होती. ते एखाद्या तांत्रिक बिघाडासारखे (glitch) वाटत होते. मी प्रत्येक मस्कॉटला एक रँडम ॲनिमेशन डिले (random animation delay) देऊन हे सुधारले. आता प्रत्येक मस्कॉट स्वतःच्या वेळेनुसार डोळे मिचकावते.
• कॅचलाईट (The Catchlight) मी प्रत्येक डोळ्यात एक छोटा पांढरा ठिपका जोडला. हा छोटासा तपशील एका साध्या चित्रात आणि एका जिवंत पात्रात (character) फरक निर्माण करतो. यामुळे ती तुमच्याकडे पाहत असल्यासारखी वाटते.
• वापरकर्त्यांचा आदर करणे
हालचाल विचलित करणारी असू शकते. मी prefers-reduced-motion मीडिया क्वेरी वापरतो. जर एखाद्या वापरकर्त्याला कमी हालचाल हवी असेल, तर मी सर्व ॲनिमेशन त्वरित थांबवतो.
• लेआउट शिफ्ट टाळणे (Avoiding Layout Shift) मी मस्कॉटचा चेहरा थेट HTML मध्ये लिहितो. जर मी रिकामी जागा (placeholder) सोडली, तर JavaScript लोड होताना पेज अचानक हलते. सुरुवातीपासूनच HTML मध्ये ते लिहिल्यामुळे पेज स्थिर राहते.
काहीतरी लहान आणि वैयक्तिक बनवल्यामुळे प्रोजेक्ट उठून दिसतो.
तुम्ही तिला Kaomojikan वर पाहू शकता.