উপস্থাপন করা হচ্ছে "স্ক্রোল-চালিত অ্যানিমেশনের শক্তি আনলিশ করুন"

ব্রামাস

CSS বা JavaScript ব্যবহার করে স্ক্রল-ড্রাইভেন অ্যানিমেশন সম্পর্কে সবকিছু শেখার জন্য ১০ পর্বের ভিডিও কোর্স "Unleash the Power of Scroll-Driven Animations" প্রকাশের ঘোষণা দিতে পেরে আমরা গর্বিত।

আপনি সিরিজটি ইউটিউবে দেখতে পারেন। প্রথম পর্বটি এখানে এমবেড করা আছে।

স্ক্রল-চালিত অ্যানিমেশন?

স্ক্রল-ড্রাইভেন অ্যানিমেশনের সাহায্যে আপনি বিদ্যমান কোনো CSS বা WAAPI অ্যানিমেশনকে স্ক্রল করার সময় অ্যানিমেট করতে পারেন। একারণে, স্ক্রল-ড্রাইভেন অ্যানিমেশনগুলো এই API-গুলোর সমস্ত সুবিধা পেয়ে থাকে। এর মধ্যে হার্ডওয়্যার অ্যাক্সিলারেটেড স্ক্রল-ড্রাইভেন অ্যানিমেশনও অন্তর্ভুক্ত, যেগুলোতে মেইন থ্রেড ব্লক হয়ে গেলেও জ্যাঙ্কের সমস্যা হয় না।

ক্রোম ১১৫ থেকে স্ক্রল-চালিত অ্যানিমেশন পাওয়া যায় এবং এগুলো প্রগ্রেসিভ এনহ্যান্সমেন্টের জন্য উপযুক্ত।

Browser Support

  • ক্রোম: ১১৫।
  • প্রান্ত: ১১৫।
  • ফায়ারফক্স টেকনোলজি প্রিভিউ: সমর্থিত।
  • সাফারি: ২৬।

Source

স্ক্রল-চালিত অ্যানিমেশন সম্পর্কে আরও জানতে ভিডিও সিরিজটি দেখুন অথবা ডকুমেন্টেশনটি পড়ুন ।

পর্বগুলো

কোর্সটি ১০টি পর্ব নিয়ে গঠিত এবং এটিকে দুটি বড় অংশে ভাগ করা হয়েছে: স্ক্রল-চালিত অ্যানিমেশন তৈরির মূল ধারণাগুলোর ব্যাখ্যা এবং এর কয়েকটি ব্যবহারিক প্রয়োগ।

  1. পর্ব ১: ভূমিকা ।
  2. পর্ব ২: মূল ধারণা: scroll() এবং ScrollTimeline ।
  3. পর্ব ৩: মূল ধারণা: view() এবং ViewTimeline ।
  4. পর্ব ৪: মূল ধারণা: টাইমলাইন পরিসরের রহস্য উন্মোচন ।
  5. পর্ব ৫: মূল ধারণা: টাইমলাইন অনুসন্ধান এবং নামযুক্ত টাইমলাইন ।
  6. পর্ব ৬: ব্যবহারিক প্রয়োগ: একটি স্ক্রল কন্টেইনারে স্ক্রল শ্যাডো যোগ করা ।
  7. পর্ব ৭: ব্যবহারিক প্রয়োগ: বিভিন্ন দিকে উপাদানসমূহকে অ্যানিমেট করুন ।
  8. পর্ব ৮: ব্যবহারিক প্রয়োগ: স্ক্রল-এ থ্রিডি মডেল অ্যানিমেট করুন এবং আরও অনেক কিছু ।
  9. পর্ব ৯: ব্যবহারিক প্রয়োগ: স্ক্রল বেগ শনাক্তকরণ ।
  10. পর্ব ১০: উপসংহার ।

পর্বগুলো ক্রমানুসারে দেখাই শ্রেয়, কারণ এগুলোতে পূর্ববর্তী পর্বগুলোতে আলোচিত ডেমো এবং কৌশলগুলোর ওপর ভিত্তি করে বিষয়গুলো তৈরি করা হয়েছে। প্রতিটি পর্বে দেখানো ডেমো এবং টুলগুলো অনলাইনে পাওয়া যায় এবং বিবরণে সেগুলোর লিঙ্ক দেওয়া আছে।

আরও তথ্য