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

Yuriko Hirota

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

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

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

• স্ক্রল করার কাজটি আলাদা থ্রেডে করা হয় এবং সেই কারণে অ্যাসিঙ্ক্রোনাস স্ক্রল ইভেন্ট ডেলিভার করে।
• মূল থ্রেড অ্যানিমেশন জ্যাঙ্ক হওয়ার সম্ভাবনা থাকে।

এর ফলে, স্ক্রল করার সাথে সিঙ্ক করা পারফর্ম্যান্স-ভিত্তিক স্ক্রল-চালিত অ্যানিমেশন তৈরি করা অসম্ভব বা খুব কঠিন হয়ে যায়।

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

এই নিবন্ধটি নতুন API-এর মাধ্যমে স্ক্রল-ড্রিভেন অ্যানিমেশন কতটা সহজ ও মসৃণ হতে পারে তা দেখাতে নতুন পদ্ধতির সাথে ক্লাসিক জাভাস্ক্রিপ্ট টেকনিকের তুলনা করে।

স্ক্রল-চালিত অ্যানিমেশন CSS API বনাম ক্লাসিক JavaScript

নিচে দেওয়া প্রগ্রেস বারটি ক্লাস জাভাস্ক্রিপ্ট টেকনিক ব্যবহার করে তৈরি করা হয়েছে।

scroll ইভেন্ট যতবার ঘটবে, ডকুমেন্ট ততবার উত্তর দেবে যাতে ব্যবহারকারী scrollHeight-এর কত শতাংশ স্ক্রল করেছেন তা গণনা করা যায়।

document.addEventListener("scroll&q>uot;, () = {
  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);
}

নতুন animation-timeline CSS ফিচার, স্ক্রল রেঞ্জের মধ্যে থাকা পজিশনকে অটোমেটিক প্রগ্রেসের শতাংশে কনভার্ট করে, তাই এটিই সব কঠিন কাজ করে দেয়।

এবার সবচেয়ে গুরুত্বপূর্ণ বিষয়টি জেনে নেওয়া যাক—ধরুন, আপনি ওয়েবসাইটের দুটি ভার্সনেই এমন একটি খুব জটিল ক্যালকুলেশন প্রয়োগ করেছেন যা মূল থ্রেডের বেশিরভাগ রিসোর্স ব্যবহার করে।

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

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

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

নিচের ডেমোতে CyberAgent-এর তৈরি করা স্ক্রল ড্রাইভেন অ্যানিমেশনের একটি অ্যাপ্লিকেশন দেখানো হয়েছে। আপনি স্ক্রল করার সাথে সাথে ফটোটি ধীরে ধীরে স্পষ্ট হয়ে উঠছে বলে দেখতে পাবেন।

নতুন স্ক্রল-চালিত অ্যানিমেশন JavaScript API বনাম ক্লাসিক JavaScript

নতুন 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,
    }),
  }
);

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

এছাড়াও, এই নতুন API, ডিক্লেয়ারেটিভ স্ক্রল-চালিত অ্যানিমেশন চালু করতে, আগে থেকে থাকা Web Animations API (WAAPI) এবং CSS Animations API-এর সাথে একসাথে কাজ করে।

আরও ডেমো ও রিসোর্স

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

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