স্ক্রল-চালিত অ্যানিমেশন কর্মক্ষমতা উপর একটি কেস স্টাডি

Yuriko Hirota

স্ক্রোল-চালিত অ্যানিমেশনে নতুন কী আছে?

স্ক্রোল-চালিত অ্যানিমেশনগুলি আপনার ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনে ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল আগ্রহ যোগ করার একটি উপায়, যা ব্যবহারকারীর স্ক্রোল অবস্থান দ্বারা ট্রিগার করা হয়। এটি ব্যবহারকারীদের ব্যস্ত রাখার এবং আপনার ওয়েবসাইটকে আরও আকর্ষণীয় করে তোলার একটি দুর্দান্ত উপায় হতে পারে।

অতীতে, স্ক্রোল-চালিত অ্যানিমেশন তৈরির একমাত্র উপায় ছিল মূল থ্রেডে স্ক্রোল ইভেন্টের প্রতিক্রিয়া জানানো। এর ফলে দুটি প্রধান সমস্যা দেখা দেয়:

• স্ক্রোলিং একটি পৃথক থ্রেডে সঞ্চালিত হয় এবং তাই স্ক্রোল ইভেন্টগুলি অ্যাসিঙ্ক্রোনাসভাবে সরবরাহ করে।
• প্রধান থ্রেড অ্যানিমেশনগুলি jank এর অধীনে ।

এর ফলে স্ক্রোলিংয়ের সাথে সামঞ্জস্যপূর্ণ পারফর্ম্যান্স স্ক্রোল-চালিত অ্যানিমেশন তৈরি করা অসম্ভব বা খুব কঠিন হয়ে পড়ে।

আমরা এখন স্ক্রোল-চালিত অ্যানিমেশন সমর্থন করার জন্য API-এর একটি নতুন সেট প্রবর্তন করছি, যা আপনি CSS বা JavaScript থেকে ব্যবহার করতে পারেন। API যতটা সম্ভব কম মূল থ্রেড রিসোর্স ব্যবহার করার চেষ্টা করে, স্ক্রোল-চালিত অ্যানিমেশনগুলি বাস্তবায়ন করা অনেক সহজ এবং আরও মসৃণ করে তোলে। স্ক্রোল-চালিত অ্যানিমেশন API বর্তমানে নিম্নলিখিত ব্রাউজারগুলিতে সমর্থিত:

Browser Support

• 115
• 115
• 
• 26

Source

এই প্রবন্ধে নতুন পদ্ধতির তুলনা করে ক্লাসিক জাভাস্ক্রিপ্ট কৌশল দেখানো হয়েছে যে নতুন API ব্যবহার করে স্ক্রোল-চালিত অ্যানিমেশনগুলি কতটা সহজ এবং মসৃণ হতে পারে।

দ্রষ্টব্য: স্ক্রোল-চালিত অ্যানিমেশন ব্যবহারের ফলে নিম্নলিখিত কর্মক্ষমতা লাভগুলি Chrome 116 থেকে পাওয়া যায়।

স্ক্রোল-চালিত অ্যানিমেশন CSS API বনাম ক্লাসিক জাভাস্ক্রিপ্ট

নিম্নলিখিত উদাহরণের অগ্রগতি বারটি ক্লাস জাভাস্ক্রিপ্ট কৌশল ব্যবহার করে তৈরি করা হয়েছে।

ব্যবহারকারী কত শতাংশ scrollHeight স্ক্রোল করেছেন তা গণনা করার জন্য প্রতিটি scroll ইভেন্ট ঘটলে ডকুমেন্টটি সাড়া দেয়।

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

নিম্নলিখিত ডেমোটি CSS সহ নতুন API ব্যবহার করে একই অগ্রগতি বার দেখায়।

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

নতুন অ্যানিমেশন-টাইমলাইন সিএসএস বৈশিষ্ট্যটি স্বয়ংক্রিয়ভাবে একটি স্ক্রোল রেঞ্জের একটি অবস্থানকে অগ্রগতির শতাংশে রূপান্তরিত করে, যার ফলে সমস্ত ভারী কাজ সম্পন্ন হয়।

এবার মজার অংশটা হলো—ধরুন আপনি ওয়েবসাইটের উভয় সংস্করণেই একটি অতি-ভারী গণনা বাস্তবায়ন করেছেন যা মূল থ্রেড রিসোর্সের বেশিরভাগই খেয়ে ফেলবে।

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

যেমনটা আপনি আশা করেছিলেন, মূল থ্রেড রিসোর্স জংশনের কারণে ক্লাসিক জাভাস্ক্রিপ্ট সংস্করণটি অস্থির এবং ধীর হয়ে যায়। অন্যদিকে, CSS সংস্করণটি ভারী জাভাস্ক্রিপ্ট কাজের দ্বারা সম্পূর্ণরূপে প্রভাবিত হয় না এবং ব্যবহারকারীর স্ক্রোল ইন্টারঅ্যাকশনের প্রতিক্রিয়া জানাতে পারে।

DevTools-এ CPU ব্যবহার সম্পূর্ণ ভিন্ন, যেমনটি নিম্নলিখিত স্ক্রিনশটগুলিতে দেখানো হয়েছে।

নিচের ডেমোটি সাইবারএজেন্ট দ্বারা তৈরি স্ক্রোল-চালিত অ্যানিমেশনের একটি অ্যাপ্লিকেশন দেখায়। আপনি দেখতে পাবেন যে স্ক্রোল করার সাথে সাথে ছবিটি অদৃশ্য হয়ে যাচ্ছে।

ক্লাসিক জাভাস্ক্রিপ্টের বিপরীতে নতুন স্ক্রোল-চালিত অ্যানিমেশন জাভাস্ক্রিপ্ট এপিআই

নতুন API-এর সুবিধা কেবল CSS-এর মধ্যেই সীমাবদ্ধ নয়। আপনি জাভাস্ক্রিপ্ট ব্যবহার করেও সিল্কি মসৃণ স্ক্রোল-চালিত অ্যানিমেশন তৈরি করতে পারবেন। নিম্নলিখিত উদাহরণটি একবার দেখুন:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

এটি আপনাকে কেবল জাভাস্ক্রিপ্ট ব্যবহার করে পূর্ববর্তী CSS ডেমোতে দেখানো একই অগ্রগতি বার অ্যানিমেশন তৈরি করতে সক্ষম করে। অন্তর্নিহিত প্রযুক্তি CSS সংস্করণের মতোই। API যতটা সম্ভব কম মূল থ্রেড রিসোর্স ব্যবহার করার চেষ্টা করে, যা ক্লাসিক জাভাস্ক্রিপ্ট পদ্ধতির তুলনায় অ্যানিমেশনগুলিকে অনেক মসৃণ করে তোলে।

এছাড়াও, এই নতুন APIটি বিদ্যমান ওয়েব অ্যানিমেশন API (WAAPI) এবং CSS অ্যানিমেশন API-এর সাথে একত্রে কাজ করে যাতে ঘোষণামূলক স্ক্রোল-চালিত অ্যানিমেশনগুলি সক্ষম করা যায়।

আরও ডেমো এবং রিসোর্স

আপনি এই ডেমো সাইটের মাধ্যমে স্ক্রোল চালিত অ্যানিমেশনের বিভিন্ন বাস্তবায়ন পরীক্ষা করতে পারেন, যেখানে আপনি CSS এবং JavaScript থেকে এই নতুন API গুলি ব্যবহার করে ডেমোগুলির তুলনা করতে পারেন।

আপনি যদি নতুন স্ক্রোল-চালিত অ্যানিমেশন সম্পর্কে আরও জানতে আগ্রহী হন, তাহলে এই নিবন্ধটি এবং I/O 2023 আলোচনাটি দেখুন!