𝗦𝗮𝘆𝗮 𝗠𝗲𝗺𝗯𝗲𝗿𝗶𝗸𝗮𝗻 𝗠𝗮𝘀𝗸𝗼𝘁 𝗸𝗲𝗽𝗮𝗱𝗮 𝗣𝗿𝗼𝘆𝗲𝗸 𝗦𝗮𝗺𝗽𝗶𝗻𝗴𝗮𝗻 𝗦𝗮𝘆𝗮
Saya suka kaomoji Jepang. Wajah-wajah kecil ini memberikan kehangatan pada sebuah pesan.
Kebanyakan situs web untuk mencarinya terasa kuno. Halamannya terasa sempit dan terlalu banyak iklan. Saya ingin membangun sesuatu yang berbeda. Saya ingin sebuah toko digital yang terasa hangat dan hidup.
Jadi saya membuat Nyamoji. Dia adalah maskot kecil yang hidup di halaman tersebut. Dia mengikuti kursor Anda, berkedip, dan bernapas.
Anda tidak memerlukan library yang berat untuk melakukan ini. Anda hanya butuh SVG biasa, satu event pointermove, dan sedikit CSS.
Begini cara saya membuatnya terasa hidup:
• Pergerakan Mata
Saya menggunakan satu listener pointermove. Saya menghitung arah dari wajahnya ke kursor Anda. Kemudian saya menggeser matanya sedikit ke arah tersebut.
Saya mempelajari dua hal di sini. Pertama, saya membatasi pergerakan vertikal hingga 85 persen. Jika matanya bergerak terlalu jauh ke atas dan ke bawah, dia akan terlihat menyeramkan. Kedua, saya menambahkan transisi CSS kecil. Tanpanya, matanya akan melompat-lompat seperti robot. Dengan transisi tersebut, matanya akan meluncur halus.
• Perbaikan Kedipan Awalnya, setiap maskot di halaman saya berkedip di waktu yang sama. Itu terlihat seperti glitch. Saya memperbaikinya dengan menambahkan delay animasi acak pada setiap maskot. Sekarang, masing-masing berkedip sesuai jadwalnya sendiri.
• Catchlight Saya menambahkan titik putih kecil di setiap mata. Detail kecil ini memberikan perbedaan antara sekadar gambar dan sebuah karakter. Ini membuatnya tampak seolah-olah sedang menatap Anda.
• Menghormati Pengguna
Pergerakan bisa mengganggu konsentrasi. Saya menggunakan media query prefers-reduced-motion. Jika pengguna menginginkan gerakan yang lebih sedikit, saya akan segera menghentikan semua animasi.
• Menghindari Layout Shift Saya menulis wajah maskot langsung ke dalam HTML. Jika saya menggunakan placeholder kosong, halaman akan melompat saat JavaScript dimuat. Menuliskannya ke dalam HTML sejak awal menjaga halaman tetap stabil.
Membangun sesuatu yang kecil dan personal membuat sebuah proyek tampil menonjol.
Anda dapat menemukannya di Kaomojikan.