এই পোস্টে কোডপেনে পাওয়া কিছু জনপ্রিয় অ্যানিমেশন কীভাবে তৈরি করা হয়েছে তা জানুন। এই অ্যানিমেশনগুলি এই বিভাগের অন্যান্য নিবন্ধগুলিতে আলোচিত পারফর্ম্যান্স কৌশলগুলি ব্যবহার করে।
এই সুপারিশগুলির পিছনে তত্ত্ব জানতে কিছু অ্যানিমেশন কেন ধীর? দেখুন, এবং ব্যবহারিক টিপসের জন্য অ্যানিমেশন গাইড দেখুন ।
উইজার্ড লোডিং অ্যানিমেশন
কোডপেনে উইজার্ড লোডিং অ্যানিমেশন দেখুন
এই লোডিং অ্যানিমেশনটি সম্পূর্ণরূপে CSS দিয়ে তৈরি। ছবিটি এবং সমস্ত অ্যানিমেশন CSS এবং HTML ব্যবহার করে তৈরি করা হয়েছে, কোনও ছবি বা জাভাস্ক্রিপ্ট ব্যবহার করা হয়নি। এটি কীভাবে তৈরি করা হয়েছে এবং এটি কতটা ভালোভাবে কাজ করে তা বোঝার জন্য আপনি Chrome DevTools ব্যবহার করতে পারেন।
Chrome DevTools দিয়ে অ্যানিমেশনটি পরীক্ষা করুন
অ্যানিমেশনটি চালু থাকা অবস্থায়, Chrome DevTools-এ Performance ট্যাবটি খুলুন এবং অ্যানিমেশনের কয়েক সেকেন্ড রেকর্ড করুন। আপনি সারাংশে দেখতে পাবেন যে এই অ্যানিমেশনটি চালানোর সময় ব্রাউজারটি কোনও লেআউট বা পেইন্ট অপারেশন করছে না।