ผมสร้างมาสคอตให้กับโปรเจกต์เสริมของผม
ผมชอบ kaomoji ของญี่ปุ่นมาก ใบหน้าเล็กๆ เหล่านี้ช่วยเพิ่มความรู้สึกอบอุ่นให้กับข้อความ
เว็บไซต์ส่วนใหญ่ที่ใช้หา kaomoji ให้ความรู้สึกเก่า มีหน้าเว็บที่ดูอึดอัดและมีโฆษณาเยอะเกินไป ผมจึงอยากสร้างอะไรที่แตกต่างออกไป ผมอยากสร้างร้านค้าดิจิทัลที่ให้ความรู้สึกอบอุ่นและมีชีวิตชีวา
ผมจึงสร้าง Nyamoji ขึ้นมา เธอเป็นมาสคอตตัวเล็กๆ ที่อาศัยอยู่บนหน้าเว็บ เธอจะคอยมองตามเคอร์เซอร์ของคุณ กระพริบตา และหายใจได้ด้วย
คุณไม่จำเป็นต้องใช้ library หนักๆ เพื่อทำสิ่งนี้เลย แค่ใช้ SVG ธรรมดา, event pointermove หนึ่งตัว และ CSS อีกเล็กน้อยก็พอ
นี่คือวิธีที่ผมทำให้เธอรู้สึกมีชีวิตชีวา:
• การเคลื่อนไหวของดวงตา
ผมใช้ listener ของ pointermove เพียงตัวเดียว ผมคำนวณทิศทางจากใบหน้าของเธอไปยังเคอร์เซอร์ของคุณ จากนั้นจึงขยับดวงตาของเธอไปในทิศทางนั้น
ผมได้เรียนรู้สองบทเรียนจากเรื่องนี้ อย่างแรกคือ ผมจำกัดการเคลื่อนไหวในแนวตั้งไว้ที่ 85 เปอร์เซ็นต์ ถ้าดวงตาของเธอขยับขึ้นลงมากเกินไป เธอจะดูน่ากลัว อย่างที่สองคือ ผมเพิ่ม CSS transition เล็กน้อย หากไม่มีมัน ดวงตาของเธอจะกระโดดไปมาเหมือนหุ่นยนต์ แต่ถ้ามีมัน ดวงตาจะเคลื่อนไหวอย่างนุ่มนวล
• การแก้ไขเรื่องการกระพริบตา ในตอนแรก มาสคอตทุกตัวบนหน้าเว็บของผมกระพริบตาพร้อมกันหมด ซึ่งมันดูเหมือนบั๊ก (glitch) ผมจึงแก้ไขด้วยการเพิ่มการหน่วงเวลาแอนิเมชันแบบสุ่ม (random animation delay) ให้กับมาสคอตแต่ละตัว ตอนนี้พวกเธอจึงกระพริบตาตามจังหวะของตัวเอง
• แสงสะท้อนในดวงตา (Catchlight) ผมเพิ่มจุดสีขาวเล็กๆ ลงในดวงตาทั้งสองข้าง รายละเอียดเล็กๆ นี้คือสิ่งที่สร้างความแตกต่างระหว่าง "ภาพวาด" กับ "ตัวละคร" มันทำให้เธอดูเหมือนกำลังจ้องมองคุณอยู่จริงๆ
• การเคารพผู้ใช้งาน
การเคลื่อนไหวอาจทำให้เสียสมาธิได้ ผมจึงใช้ media query prefers-reduced-motion หากผู้ใช้งานต้องการลดการเคลื่อนไหว ผมจะหยุดแอนิเมชันทั้งหมดทันที
• การหลีกเลี่ยง Layout Shift ผมเขียนหน้าของมาสคอตลงใน HTML โดยตรง หากผมใช้ placeholder ว่างๆ หน้าเว็บจะกระโดดเมื่อ JavaScript โหลดเสร็จ การเขียนลงใน HTML ตั้งแต่เริ่มต้นจะช่วยให้หน้าเว็บมีความเสถียร
การสร้างบางสิ่งที่เล็กน้อยและเป็นส่วนตัวช่วยให้โปรเจกต์โดดเด่นขึ้นมาได้
คุณสามารถพบเธอได้ที่ Kaomojikan