મેં મારા સાઇડ પ્રોજેક્ટને એક માસ્કોટ આપ્યો
મને જાપાનીઝ kaomoji ખૂબ ગમે છે. આ નાના ચહેરા સંદેશમાં હુંફ ઉમેરે છે.
તેમને શોધવા માટેની મોટાભાગની વેબસાઇટ્સ જૂની લાગે છે. તેમાં પેજ ભીડભાડવાળા હોય છે અને જાહેરાતો પણ ઘણી વધારે હોય છે. મારે કંઈક અલગ બનાવવું હતું. મારે એક એવી ડિજિટલ દુકાન બનાવવી હતી જે હુંફાળી અને જીવંત લાગે.
તેથી મેં Nyamoji બનાવી. તે એક નાનો માસ્કોટ છે જે પેજ પર રહે છે. તે તમારા કર્સરને અનુસરે છે, પલક ઝપકાવે છે અને શ્વાસ લે છે.
આ કરવા માટે તમારે ભારે લાઇબ્રેરીઓની જરૂર નથી. તમારે ફક્ત સાદા SVG, એક pointermove ઇવેન્ટ અને થોડા CSS ની જરૂર છે.
મેં તેને જીવંત કેવી રીતે બનાવી તે અહીં છે:
• આંખોની હલચલ (The Eye Movement) હું એક જ pointermove લિસનરનો ઉપયોગ કરું છું. હું તેના ચહેરાથી તમારા કર્સર સુધીની દિશાની ગણતરી કરું છું. પછી હું તેની આંખોને તે દિશામાં થોડી ખસેડું છું.
મેં અહીં બે પાઠ શીખ્યા. પ્રથમ, હું ઊભી હલચલ (vertical movement) ને 85 ટકા સુધી મર્યાદિત રાખું છું. જો તેની આંખો બહુ વધારે ઉપર-નીચે થાય, તો તે ડરામણી લાગે છે. બીજું, હું એક નાનું CSS transition ઉમેરું છું. તેના વગર, તેની આંખો રોબોટની જેમ કૂદે છે. તેનાથી, તે સરળતાથી સરકી જાય છે.
• પલક ઝપકાવવાની સમસ્યાનું નિરાકરણ (The Blinking Fix) શરૂઆતમાં, મારા પેજ પરના દરેક માસ્કોટ એકસાથે પલક ઝપકાવતા હતા. તે કોઈ ગ્લિચ (glitch) જેવું લાગતું હતું. મેં દરેક માસ્કોટમાં રેન્ડમ એનિમેશન ડિલે (animation delay) ઉમેરીને આ સમસ્યા સુધારી દીધી. હવે તેઓ દરેક પોતાના સમય મુજબ પલક ઝપકાવે છે.
• કેચલાઇટ (The Catchlight) મેં દરેક આંખમાં એક નાનું સફેદ ટપકું ઉમેર્યું. આ નાની વિગત એક ચિત્ર અને એક પાત્ર (character) વચ્ચેનો તફાવત સ્પષ્ટ કરે છે. તેનાથી એવું લાગે છે કે તે તમારી સામે જોઈ રહી છે.
• વપરાશકર્તાઓનું સન્માન (Respecting Users) હલચલ ધ્યાન ભટકાવી શકે છે. હું prefers-reduced-motion મીડિયા ક્વેરીનો ઉપયોગ કરું છું. જો વપરાશકર્તા ઓછી હલચલ ઈચ્છતા હોય, તો હું તરત જ બધી એનિમેશન બંધ કરી દઉં છું.
• લેઆઉટ શિફ્ટ (Layout Shift) ટાળવું હું માસ્કોટનો ચહેરો સીધો HTML માં લખું છું. જો હું ખાલી પ્લેસહોલ્ડરનો ઉપયોગ કરું, તો JavaScript લોડ થાય ત્યારે પેજ કૂદે છે. શરૂઆતથી જ તેને HTML માં લખવાથી પેજ સ્થિર રહે છે.
કંઈક નાનું અને વ્યક્તિગત બનાવવાથી પ્રોજેક્ટ અલગ તરી આવે છે.
તમે તેને Kaomojikan પર શોધી શકો છો.