Yan Projem İçin Bir Maskot Oluşturdum
Japon kaomojilerine bayılıyorum. Bu küçük yüzler bir mesaja sıcaklık katıyor.
Onları bulmak için kullanılan çoğu web sitesi eski hissettiriyor. Sayfaları sıkışık ve çok fazla reklam var. Ben farklı bir şey inşa etmek istedim. Sıcak ve canlı hissettiren dijital bir dükkan istedim.
Bu yüzden Nyamoji'yi yaptım. Sayfada yaşayan küçük bir maskot. İmlecinizi takip ediyor, göz kırpıyor ve nefes alıyor.
Bunu yapmak için ağır kütüphanelere ihtiyacınız yok. Sadece düz SVG, bir pointermove olayı ve biraz CSS yeterli.
Onu nasıl canlı hissettirdiğimi aşağıda bulabilirsiniz:
• Göz Hareketi
Tek bir pointermove dinleyicisi kullanıyorum. Yüzünden imlecinize olan yönü hesaplıyorum. Sonra gözlerini o yöne doğru hafifçe hareket ettiriyorum.
Burada iki ders öğrendim. Birincisi, dikey hareketi yüzde 85 ile sınırlıyorum. Gözleri çok fazla yukarı aşağı hareket ederse ürkütücü görünüyor. İkincisi, küçük bir CSS geçişi (transition) ekliyorum. O olmadan gözleri bir robot gibi sıçrıyor; onunla birlikte ise süzülüyorlar.
• Göz Kırpma Sorununun Çözümü İlk başta, sayfamdaki her maskot aynı anda göz kırpıyordu. Bir hata (glitch) gibi görünüyordu. Bunu, her maskota rastgele bir animasyon gecikmesi (animation delay) ekleyerek düzelttim. Artık her biri kendi programına göre göz kırpıyor.
• Işık Yansıması (Catchlight) Her bir gözün içine küçücük beyaz bir nokta ekledim. Bu küçük detay, bir çizim ile bir karakter arasındaki farkı yaratıyor. Sanki size bakıyormuş gibi görünmesini sağlıyor.
• Kullanıcılara Saygı Duymak
Hareket dikkat dağıtıcı olabilir. prefers-reduced-motion medya sorgusunu kullanıyorum. Eğer bir kullanıcı daha az hareket istiyorsa, tüm animasyonları anında durduruyorum.
• Düzen Kaymasını (Layout Shift) Önlemek Maskot yüzünü doğrudan HTML içine yazıyorum. Eğer boş bir yer tutucu (placeholder) kullanırsam, JavaScript yüklendiğinde sayfa sıçrıyor. En baştan HTML içine yazmak sayfanın sabit kalmasını sağlıyor.
Küçük ve kişisel bir şey inşa etmek, bir projeyi öne çıkarır.
Onu Kaomojikan'da bulabilirsiniz.