𝗜𝗸 𝗵𝗲𝗯 𝗺𝗶𝗷𝗻 𝘇𝗶𝗷𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗲𝗲𝗻 𝗺𝗮𝘀𝗰𝗼𝘁𝘁𝗲 𝗴𝗲𝗴𝗲𝘃𝗲𝗻
Ik hou van Japanse kaomoji. Deze kleine gezichtjes voegen warmte toe aan een bericht.
De meeste websites om ze te vinden voelen verouderd aan. Ze hebben overvolle pagina's en te veel advertenties. Ik wilde iets anders bouwen. Ik wilde een digitale winkel die warm en levendig aanvoelt.
Dus ik heb Nyamoji gebouwd. Ze is een kleine mascotte die op de pagina leeft. Ze volgt je cursor, knippert en ademt.
Je hebt geen zware libraries nodig om dit te doen. Je hebt alleen gewone SVG, één pointermove event en wat CSS nodig.
Hier is hoe ik haar tot leven heb gewekt:
• De oogbeweging Ik gebruik één enkele pointermove listener. Ik bereken de richting van haar gezicht naar je cursor. Daarna stuur ik haar ogen een klein beetje in die richting bij.
Ik heb hier twee lessen uit geleerd. Ten eerste beperk ik de verticale beweging tot 85 procent. Als haar ogen te ver omhoog en omlaag bewegen, ziet ze er griezelig uit. Ten tweede voeg ik een kleine CSS transition toe. Zonder deze transitie springen haar ogen als een robot. Met deze transitie glijden ze.
• De fix voor het knipperen In het begin knipperde elke mascotte op mijn pagina tegelijkertijd. Dat zag eruit als een glitch. Ik heb dit opgelost door een willekeurige animation delay aan elke mascotte toe te voegen. Nu knipperen