ਮੈਂ ਆਪਣੇ ਸਾਈਡ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਮਾਸਕੋਟ ਦਿੱਤਾ
ਮੈਨੂੰ ਜਾਪਾਨੀ kaomoji ਬਹੁਤ ਪਸੰਦ ਹਨ। ਇਹ ਛੋਟੇ ਚਿਹਰੇ ਸੁਨੇਹੇ ਵਿੱਚ ਨਿੱਘ ਭਰ ਦਿੰਦੇ ਹਨ।
ਉਹਨਾਂ ਨੂੰ ਲੱਭਣ ਲਈ ਜ਼ਿਆਦਾਤਰ ਵੈੱਬਸਾਈਟਾਂ ਪੁਰਾਣੀਆਂ ਲੱਗਦੀਆਂ ਹਨ। ਉਹਨਾਂ ਦੇ ਪੇਜ ਭਰੇ ਹੋਏ ਹੁੰਦੇ ਹਨ ਅਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਇਸ਼ਤਿਹਾਰ ਹੁੰਦੇ ਹਨ। ਮੈਂ ਕੁਝ ਵੱਖਰਾ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਸੀ। ਮੈਂ ਇੱਕ ਅਜਿਹੀ ਡਿਜੀਟਲ ਦੁਕਾਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਸੀ ਜੋ ਨਿੱਘੀ ਅਤੇ ਜਿਉਂਦੀ-ਜਾਗਦੀ ਮਹਿਸੂਸ ਹੋਵੇ।
ਇਸ ਲਈ ਮੈਂ Nyamoji ਬਣਾਈ। ਉਹ ਇੱਕ ਛੋਟਾ ਮਾਸਕੋਟ ਹੈ ਜੋ ਪੇਜ 'ਤੇ ਰਹਿੰਦੀ ਹੈ। ਉਹ ਤੁਹਾਡੇ ਕਰਸਰ (cursor) ਦਾ ਪਿੱਛਾ ਕਰਦੀ ਹੈ, ਪਲਕਾਂ ਝਪਕਾਉਂਦੀ ਹੈ, ਅਤੇ ਸਾਹ ਲੈਂਦੀ ਹੈ।
ਅਜਿਹਾ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਭਾਰੀ libraries ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਤੁਹਾਨੂੰ ਸਿਰਫ਼ plain SVG, ਇੱਕ pointermove event, ਅਤੇ ਕੁਝ CSS ਦੀ ਲੋੜ ਹੈ।
ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਮੈਂ ਉਸਨੂੰ ਜਿਉਂਦਾ ਕਿਵੇਂ ਮਹਿਸੂਸ ਕਰਵਾਇਆ:
• ਅੱਖਾਂ ਦੀ ਹਰਕਤ (The Eye Movement) ਮੈਂ ਇੱਕ ਸਿੰਗਲ pointermove listener ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ। ਮੈਂ ਉਸਦੇ ਚਿਹਰੇ ਤੋਂ ਤੁਹਾਡੇ ਕਰਸਰ ਤੱਕ ਦੀ ਦਿਸ਼ਾ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹਾਂ। ਫਿਰ ਮੈਂ ਉਸਦੀਆਂ ਅੱਖਾਂ ਨੂੰ ਉਸੇ ਦਿਸ਼ਾ ਵਿੱਚ ਹਲਕਾ ਜਿਹਾ ਹਿਲਾਉਂਦਾ ਹਾਂ।
ਮੈਂ ਇੱਥੇ ਦੋ ਸਬਕ ਸਿੱਖੇ। ਪਹਿਲਾ, ਮੈਂ ਲੰਬਾਈ (vertical) ਵਾਲੀ ਹਰਕਤ ਨੂੰ 85 ਫੀਸਦੀ ਤੱਕ ਸੀਮਤ ਕਰਦਾ ਹਾਂ। ਜੇਕਰ ਉਸਦੀਆਂ ਅੱਖਾਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਉੱਪਰ ਅਤੇ ਹੇਠਾਂ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਉਹ ਡਰਾਉਣੀ ਲੱਗਦੀ ਹੈ। ਦੂਜਾ, ਮੈਂ ਇੱਕ ਛੋਟਾ CSS transition ਜੋੜਦਾ ਹਾਂ। ਇਸ ਤੋਂ ਬਿਨਾਂ, ਉਸਦੀਆਂ ਅੱਖਾਂ ਇੱਕ ਰੋਬੋਟ ਵਾਂਗ ਛਾਲ ਮਾਰਦੀਆਂ ਹਨ। ਇਸ ਦੇ ਨਾਲ, ਉਹ ਨਰਮੀ ਨਾਲ ਹਿੱਲਦੀਆਂ ਹਨ।
• ਪਲਕਾਂ ਝਪਕਾਉਣ ਦਾ ਹੱਲ (The Blinking Fix) ਸ਼ੁਰੂ ਵਿੱਚ, ਮੇਰੇ ਪੇਜ 'ਤੇ ਹਰ ਮਾਸਕੋਟ ਇੱਕੋ ਸਮੇਂ ਪਲਕਾਂ ਝਪਕਾਉਂਦਾ ਸੀ। ਇਹ ਇੱਕ ਗਲਿੱਚ (glitch) ਵਾਂਗ ਲੱਗਦਾ ਸੀ। ਮੈਂ ਹਰ ਮਾਸਕੋਟ ਵਿੱਚ ਇੱਕ random animation delay ਜੋੜ ਕੇ ਇਸ ਨੂੰ ਠੀਕ ਕੀਤਾ। ਹੁਣ ਉਹ ਹਰ ਇੱਕ ਆਪਣੇ ਸਮੇਂ ਅਨੁਸਾਰ ਪਲਕਾਂ ਝਪਕਾਉਂਦੇ ਹਨ।
• ਕੈਚਲਾਈਟ (The Catchlight) ਮੈਂ ਹਰ ਅੱਖ ਵਿੱਚ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਚਿੱਟਾ ਬਿੰਦੂ ਜੋੜਿਆ। ਇਹ ਛੋਟੀ ਜਿਹੀ ਵੇਰਵੇ ਵਾਲੀ ਚੀਜ਼ ਇੱਕ ਡਰਾਇੰਗ ਅਤੇ ਇੱਕ ਕਿਰਦਾਰ (character) ਵਿਚਕਾਰ ਫਰਕ ਪਾਉਂਦੀ ਹੈ। ਇਹ ਉਸਨੂੰ ਅਜਿਹਾ ਦਿਖਾਉਂਦੀ ਹੈ ਜਿਵੇਂ ਉਹ ਤੁਹਾਨੂੰ ਦੇਖ ਰਹੀ ਹੋਵੇ।
• ਉਪਭੋਗਤਾਵਾਂ ਦਾ ਸਤਿਕਾਰ ਕਰਨਾ (Respecting Users) ਹਰਕਤ (Movement) ਧਿਆਨ ਭਟਕਾ ਸਕਦੀ ਹੈ। ਮੈਂ prefers-reduced-motion media query ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ। ਜੇਕਰ ਕੋਈ ਉਪਭੋਗਤਾ ਘੱਟ ਹਰਕਤ ਚਾਹੁੰਦਾ ਹੈ, ਤਾਂ ਮੈਂ ਸਾਰੀਆਂ animations ਤੁਰੰਤ ਰੋਕ ਦਿੰਦਾ ਹਾਂ।
• ਲੇਆਉਟ ਸ਼ਿਫਟ (Layout Shift) ਤੋਂ ਬਚਣਾ ਮੈਂ ਮਾਸਕੋਟ ਦੇ ਚਿਹਰੇ ਨੂੰ ਸਿੱਧਾ HTML ਵਿੱਚ ਲਿਖਦਾ ਹਾਂ। ਜੇਕਰ ਮੈਂ ਇੱਕ ਖਾਲੀ placeholder ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ, ਤਾਂ JavaScript ਲੋਡ ਹੋਣ ਵੇਲੇ ਪੇਜ ਛਾਲ ਮਾਰਦਾ ਹੈ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇਸਨੂੰ HTML ਵਿੱਚ ਲਿਖਣ ਨਾਲ ਪੇਜ ਸਥਿਰ ਰਹਿੰਦਾ ਹੈ।
ਕੁਝ ਛੋਟਾ ਅਤੇ ਨਿੱਜੀ ਬਣਾਉਣਾ ਕਿਸੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਵੱਖਰਾ ਬਣਾਉਂਦਾ ਹੈ।
ਤੁਸੀਂ ਉਸਨੂੰ Kaomojikan 'ਤੇ ਲੱਭ ਸਕਦੇ ਹੋ।