আমি আমার সাইড প্রজেক্টকে একটি মাসকট দিয়েছি
আমি জাপানিজ kaomoji পছন্দ করি। এই ছোট ছোট মুখগুলো একটি বার্তায় উষ্ণতা যোগ করে।
এগুলো খোঁজার জন্য বেশিরভাগ ওয়েবসাইটই পুরনো আমলের মনে হয়। সেগুলোতে পাতাগুলো খুব ঘিঞ্জি এবং প্রচুর বিজ্ঞাপন থাকে। আমি ভিন্ন কিছু তৈরি করতে চেয়েছিলাম। আমি এমন একটি ডিজিটাল শপ চেয়েছিলাম যা উষ্ণ এবং প্রাণবন্ত মনে হয়।
তাই আমি Nyamoji তৈরি করেছি। সে একটি ছোট মাসকট যা পেজের ওপর বাস করে। সে আপনার কার্সার অনুসরণ করে, চোখের পলক ফেলে এবং শ্বাস নেয়।
এটি করার জন্য আপনার কোনো ভারী লাইব্রেরির প্রয়োজন নেই। আপনার শুধু সাধারণ SVG, একটি pointermove event এবং কিছু CSS প্রয়োজন।
যেভাবে আমি তাকে প্রাণবন্ত করে তুলেছি:
• চোখের নড়াচড়া আমি একটি মাত্র pointermove listener ব্যবহার করি। আমি তার মুখ থেকে আপনার কার্সারের দিকে দিক নির্ণয় করি। তারপর আমি তার চোখগুলোকে সেই দিকে সামান্য নাড়াই।
আমি এখান থেকে দুটি শিক্ষা পেয়েছি। প্রথমত, আমি উলম্ব (vertical) নড়াচড়া ৮৫ শতাংশে সীমাবদ্ধ রাখি। যদি তার চোখ খুব বেশি উপরে-নিচে নড়ে, তবে তাকে অদ্ভুত বা ভুতুড়ে দেখায়। দ্বিতীয়ত, আমি একটি ছোট CSS transition যোগ করি। এটি ছাড়া তার চোখগুলো রোবটের মতো লাফিয়ে লাফিয়ে নড়ে। এটি থাকলে সেগুলো মসৃণভাবে গড়িয়ে চলে।
• চোখের পলক ফেলার সমাধান শুরুতে, আমার পেজের প্রতিটি মাসকট একই সময়ে চোখের পলক ফেলত। এটি দেখতে একটি গ্লিচ বা ত্রুটির মতো লাগত। আমি প্রতিটি মাসকটে একটি র্যান্ডম (random) অ্যানিমেশন ডিলে (animation delay) যোগ করে এটি ঠিক করেছি। এখন তারা প্রত্যেকে তাদের নিজস্ব সময়সূচী অনুযায়ী চোখের পলক ফেলে।
• ক্যাচলাইট (Catchlight) আমি প্রতিটি চোখে একটি ছোট সাদা বিন্দু যোগ করেছি। এই ছোট ডিটেইলটি একটি সাধারণ ছবি এবং একটি চরিত্রের মধ্যে পার্থক্য তৈরি করে। এটি তাকে এমনভাবে দেখায় যেন সে আপনার দিকে তাকাচ্ছে।
• ব্যবহারকারীদের প্রতি সম্মান প্রদর্শন নড়াচড়া বিভ্রান্তিকর হতে পারে। আমি prefers-reduced-motion media query ব্যবহার করি। যদি কোনো ব্যবহারকারী কম নড়াচড়া চান, তবে আমি সাথে সাথে সমস্ত অ্যানিমেশন বন্ধ করে দিই।
• লেআউট শিফট (Layout Shift) এড়ানো আমি মাসকটের মুখ সরাসরি HTML-এ লিখে দিই। আমি যদি একটি খালি প্লেসহোল্ডার ব্যবহার করি, তবে JavaScript লোড হওয়ার সময় পেজটি লাফিয়ে ওঠে। শুরু থেকেই এটি HTML-এ লিখে রাখলে পেজটি স্থিতিশীল থাকে।
ছোট এবং ব্যক্তিগত কিছু তৈরি করা একটি প্রজেক্টকে অনন্য করে তোলে।
আপনি তাকে Kaomojikan-এ খুঁজে পেতে পারেন।