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

ব্রামাস

CSS বা JavaScript ব্যবহার করে স্ক্রল-চালিত অ্যানিমেশনগুলি সম্পর্কে সমস্ত কিছু শেখার জন্য একটি 10-অংশের ভিডিও কোর্স "আনলিশ দ্য পাওয়ার অফ স্ক্রোল-চালিত অ্যানিমেশন" -এর প্রকাশ ঘোষণা করতে পেরে আমরা গর্বিত৷

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

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

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

স্ক্রোল-চালিত অ্যানিমেশনগুলি Chrome 115 থেকে Chrome-এ উপলব্ধ এবং প্রগতিশীল বর্ধনের জন্য উপযুক্ত প্রার্থী৷

ব্রাউজার সমর্থন

  • ক্রোম: 115।
  • প্রান্ত: 115।
  • ফায়ারফক্স: একটি পতাকার পিছনে।
  • সাফারি: সমর্থিত নয়।

উৎস

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

পর্বগুলো

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

  1. পর্ব 1: ভূমিকা ।
  2. পর্ব 2: মূল ধারণা: scroll() এবং ScrollTimeline ।
  3. পর্ব 3: মূল ধারণা: view() এবং ViewTimeline ।
  4. পর্ব 4: মূল ধারণা: টাইমলাইন রেঞ্জ ডিমিস্টিফাইড ।
  5. পর্ব 5: মূল ধারণা: টাইমলাইন লুকআপ এবং নামকৃত টাইমলাইন ।
  6. পর্ব 6: ব্যবহারিক প্রয়োগ: একটি স্ক্রোল কন্টেইনারে স্ক্রোল শ্যাডো যোগ করুন ।
  7. পর্ব 7: ব্যবহারিক প্রয়োগ: বিভিন্ন দিকনির্দেশে উপাদানগুলিকে অ্যানিমেট করুন ।
  8. পর্ব 8: ব্যবহারিক প্রয়োগ: অ্যানিমেট 3D মডেল এবং স্ক্রলে আরও অনেক কিছু ।
  9. পর্ব 9: ব্যবহারিক প্রয়োগ: স্ক্রোল বেগ সনাক্তকরণ ।
  10. পর্ব 10: আউটরো ।

এপিসোডগুলি ক্রমানুসারে সবচেয়ে ভালোভাবে দেখা হয় কারণ সেগুলি ডেমো এবং কৌশলগুলির উপর ভিত্তি করে তৈরি করা হয়েছে যা আগের পর্বগুলিতে কভার করা হয়েছে৷ প্রতিটি পর্বে দেখানো ডেমো এবং সরঞ্জামগুলি অনলাইনে উপলব্ধ এবং বিবরণে লিঙ্ক করা হয়েছে৷

আরও সম্পদ