ನನ್ನ ಸೈಡ್ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ನಾನು ಒಂದು ಮಸ್ಕಾಟ್ ನೀಡಿದೆ
ನನಗೆ ಜಪಾನೀಸ್ kaomoji ಎಂದರೆ ತುಂಬಾ ಇಷ್ಟ. ಈ ಪುಟ್ಟ ಮುಖಗಳು ಸಂದೇಶಕ್ಕೆ ಒಂದು ರೀತಿಯ ಆತ್ಮೀಯತೆಯನ್ನು ನೀಡುತ್ತವೆ.
ಇವುಗಳನ್ನು ಹುಡುಕುವ ಹೆಚ್ಚಿನ ವೆಬ್ಸೈಟ್ಗಳು ಹಳೆಯದಾಗಿ ಕಾಣಿಸುತ್ತವೆ. ಅವುಗಳಲ್ಲಿ ಪುಟಗಳು ಅಸ್ತವ್ಯಸ್ತವಾಗಿರುತ್ತವೆ ಮತ್ತು ಜಾಹೀರಾತುಗಳು ಹೆಚ್ಚಾಗಿರುತ್ತವೆ. ನಾನು ಏನನ್ನಾದರೂ ವಿಭಿನ್ನವಾಗಿ ನಿರ್ಮಿಸಲು ಬಯಸಿದ್ದೆ. ಆತ್ಮೀಯವಾಗಿ ಮತ್ತು ಜೀವಂತವಾಗಿ ಕಾಣುವ ಡಿಜಿಟಲ್ ಶಾಪ್ ಅನ್ನು ನಾನು ಬಯಸಿದ್ದೆ.
ಹಾಗಾಗಿ ನಾನು Nyamoji ಅನ್ನು ನಿರ್ಮಿಸಿದೆ. ಅವಳು ಪುಟದಲ್ಲಿ ವಾಸಿಸುವ ಒಂದು ಪುಟ್ಟ ಮಸ್ಕಾಟ್. ಅವಳು ನಿಮ್ಮ ಕರ್ಸರ್ ಅನ್ನು ಅನುಸರಿಸುತ್ತಾಳೆ, ಕಣ್ಣು ಮಿಟುಕಿಸುತ್ತಾಳೆ ಮತ್ತು ಉಸಿರಾಡುತ್ತಾಳೆ.
ಇದನ್ನು ಮಾಡಲು ನಿಮಗೆ ಭಾರೀ ಲೈಬ್ರರಿಗಳ ಅಗತ್ಯವಿಲ್ಲ. ನಿಮಗೆ ಕೇವಲ ಪ್ಲೇನ್ SVG, ಒಂದು pointermove event ಮತ್ತು ಸ್ವಲ್ಪ CSS ಇದ್ದರೆ ಸಾಕು.
ಅವಳನ್ನು ಜೀವಂತವಾಗಿ ಕಾಣುವಂತೆ ನಾನು ಹೀಗೆ ಮಾಡಿದೆ:
• ಕಣ್ಣಿನ ಚಲನೆ (The Eye Movement)
ನಾನು ಒಂದೇ ಒಂದು pointermove listener ಅನ್ನು ಬಳಸುತ್ತೇನೆ. ಅವಳ ಮುಖದಿಂದ ನಿಮ್ಮ ಕರ್ಸರ್ ಇರುವ ದಿಕ್ಕನ್ನು ನಾನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತೇನೆ. ನಂತರ ಅವಳ ಕಣ್ಣುಗಳನ್ನು ಆ ದಿಕ್ಕಿನಲ್ಲಿ ಚಲಿಸುತ್ತೇನೆ.
ಇಲ್ಲಿ ನಾನು ಎರಡು ಪಾಠಗಳನ್ನು ಕಲಿತೆ. ಮೊದಲನೆಯದಾಗಿ, ನಾನು ಲಂಬ ಚಲನೆಯನ್ನು (vertical movement) 85 ಪ್ರತಿಶತಕ್ಕೆ ಸೀಮಿತಗೊಳಿಸುತ್ತೇನೆ. ಅವಳ ಕಣ್ಣುಗಳು ಅತಿ ಹೆಚ್ಚು ಮೇಲಕ್ಕೆ ಮತ್ತು ಕೆಳಕ್ಕೆ ಚಲಿಸಿದರೆ, ಅವಳು ಭಯಾನಕವಾಗಿ ಕಾಣಿಸುತ್ತಾಳೆ. ಎರಡನೆಯದಾಗಿ, ನಾನು ಒಂದು ಸಣ್ಣ CSS transition ಅನ್ನು ಸೇರಿಸುತ್ತೇನೆ. ಅದು ಇಲ್ಲದಿದ್ದರೆ, ಅವಳ ಕಣ್ಣುಗಳು ರೋಬೋಟ್ನಂತೆ ಜಿಗಿಯುತ್ತವೆ. ಅದರೊಂದಿಗೆ, ಅವು ಸುಗಮವಾಗಿ ಚಲಿಸುತ್ತವೆ.
• ಕಣ್ಣು ಮಿಟುಕಿಸುವ ಸಮಸ್ಯೆಯ ಪರಿಹಾರ (The Blinking Fix) ಮೊದಲಿಗೆ, ನನ್ನ ಪುಟದಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಮಸ್ಕಾಟ್ ಒಂದೇ ಸಮಯದಲ್ಲಿ ಕಣ್ಣು ಮಿಟುಕಿಸುತ್ತಿದ್ದವು. ಅದು ಯಾವುದೋ ತಾಂತ್ರಿಕ ದೋಷದಂತೆ (glitch) ಕಾಣುತ್ತಿತ್ತು. ಪ್ರತಿಯೊಂದು ಮಸ್ಕಾಟ್ಗೆ ರ್ಯಾಂಡಮ್ ಅನಿಮೇಷನ್ ಡಿಲೇ (random animation delay) ಸೇರಿಸುವ ಮೂಲಕ ನಾನು ಇದನ್ನು ಸರಿಪಡಿಸಿದೆ. ಈಗ ಅವು ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ಆದ ಸಮಯಕ್ಕೆ ಕಣ್ಣು ಮಿಟುಕಿಸುತ್ತವೆ.
• ಕ್ಯಾಚ್ಲೈಟ್ (The Catchlight) ನಾನು ಪ್ರತಿ ಕಣ್ಣಿನಲ್ಲೂ ಒಂದು ಪುಟ್ಟ ಬಿಳಿ ಚುಕ್ಕೆಯನ್ನು ಸೇರಿಸಿದೆ. ಈ ಸಣ್ಣ ವಿವರವು ಕೇವಲ ಒಂದು ಚಿತ್ರ ಮತ್ತು ಒಂದು ಜೀವಂತ ಪಾತ್ರದ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ತೋರಿಸುತ್ತದೆ. ಇದು ಅವಳು ನಿಮ್ಮನ್ನೇ ನೋಡುತ್ತಿರುವಂತೆ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ.
• ಬಳಕೆದಾರರಿಗೆ ಗೌರವ ನೀಡುವುದು (Respecting Users)
ಚಲನೆಯು ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯಬಹುದು. ನಾನು prefers-reduced-motion media query ಅನ್ನು ಬಳಸುತ್ತೇನೆ. ಬಳಕೆದಾರರಿಗೆ ಕಡಿಮೆ ಚಲನೆ ಬೇಕಿದ್ದರೆ, ನಾನು ತಕ್ಷಣವೇ ಎಲ್ಲಾ ಅನಿಮೇಷನ್ಗಳನ್ನು ನಿಲ್ಲಿಸುತ್ತೇನೆ.
• ಲೇಔಟ್ ಶಿಫ್ಟ್ ತಪ್ಪಿಸುವುದು (Avoiding Layout Shift) ನಾನು ಮಸ್ಕಾಟ್ ಮುಖವನ್ನು ನೇರವಾಗಿ HTML ನಲ್ಲಿ ಬರೆಯುತ್ತೇನೆ. ನಾನು ಖಾಲಿ ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ (placeholder) ಬಳಸಿದರೆ, JavaScript ಲೋಡ್ ಆದಾಗ ಪುಟವು ಜಿಗಿಯುತ್ತದೆ. ಮೊದಲೇ HTML ನಲ್ಲಿ ಬರೆಯುವುದರಿಂದ ಪುಟವು ಸ್ಥಿರವಾಗಿರುತ್ತದೆ.
ಸಣ್ಣ ಮತ್ತು ವೈಯಕ್ತಿಕವಾದದ್ದನ್ನು ನಿರ್ಮಿಸುವುದು ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ವಿಭಿನ್ನವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ.
ನೀವು ಅವಳನ್ನು Kaomojikan ನಲ್ಲಿ ಕಾಣಬಹುದು.