Tôi Đã Tạo Một Linh Vật Cho Dự Án Phụ Của Mình
Tôi rất thích kaomoji Nhật Bản. Những khuôn mặt nhỏ nhắn này mang lại sự ấm áp cho một tin nhắn.
Hầu hết các trang web tìm kiếm chúng đều có cảm giác lỗi thời. Các trang web đó thường chật chội và có quá nhiều quảng cáo. Tôi muốn xây dựng một thứ gì đó khác biệt. Tôi muốn một cửa hàng kỹ thuật số mang lại cảm giác ấm áp và sống động.
Vì vậy, tôi đã tạo ra Nyamoji. Cô ấy là một linh vật nhỏ sống ngay trên trang web. Cô ấy dõi theo con trỏ chuột của bạn, chớp mắt và hít thở.
Bạn không cần đến các thư viện nặng nề để làm điều này. Bạn chỉ cần SVG thuần, một sự kiện pointermove và một chút CSS.
Đây là cách tôi khiến cô ấy trở nên sống động:
• Chuyển động của mắt
Tôi sử dụng một trình lắng nghe pointermove duy nhất. Tôi tính toán hướng từ khuôn mặt cô ấy đến con trỏ chuột của bạn. Sau đó, tôi điều chỉnh nhẹ đôi mắt cô ấy theo hướng đó.
Tôi đã rút ra được hai bài học từ việc này. Thứ nhất, tôi giới hạn chuyển động theo chiều dọc ở mức 85%. Nếu mắt cô ấy di chuyển lên xuống quá nhiều, trông cô ấy sẽ rất rợn người. Thứ hai, tôi thêm một hiệu ứng chuyển cảnh (transition) CSS nhỏ. Nếu không có nó, đôi mắt cô ấy sẽ nhảy giật cục như một con robot. Có nó, chúng sẽ lướt đi mượt mà.
• Khắc phục lỗi chớp mắt Lúc đầu, mọi linh vật trên trang của tôi đều chớp mắt cùng một lúc. Trông nó giống như một lỗi kỹ thuật. Tôi đã khắc phục điều này bằng cách thêm một độ trễ hoạt ảnh (animation delay) ngẫu nhiên cho mỗi linh vật. Giờ đây, mỗi linh vật đều chớp mắt theo lịch trình riêng của mình.
• Điểm sáng trong mắt (Catchlight) Tôi đã thêm một chấm trắng nhỏ vào mỗi con mắt. Chi tiết nhỏ này tạo nên sự khác biệt giữa một hình vẽ và một nhân vật. Nó khiến cô ấy trông như đang thực sự nhìn bạn.
• Tôn trọng người dùng
Chuyển động có thể gây xao nhãng. Tôi sử dụng truy vấn phương tiện prefers-reduced-motion. Nếu người dùng muốn giảm bớt chuyển động, tôi sẽ dừng tất cả các hoạt ảnh ngay lập tức.
• Tránh thay đổi bố cục (Layout Shift) Tôi viết trực tiếp khuôn mặt linh vật vào HTML. Nếu tôi sử dụng một trình giữ chỗ (placeholder) trống, trang web sẽ bị nhảy khi JavaScript tải xong. Việc viết trực tiếp vào HTML ngay từ đầu giúp trang web luôn ổn định.
Xây dựng một thứ gì đó nhỏ bé và mang tính cá nhân sẽ giúp dự án trở nên nổi bật.
Bạn có thể tìm thấy cô ấy tại Kaomojikan.