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

Yuriko Hirota

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

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

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

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

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

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

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

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

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

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

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 + "%";
})

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

@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);
}

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

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

নিম্নলিখিত ডেমোটি সাইবারএজেন্ট দ্বারা নির্মিত স্ক্রল-চালিত অ্যানিমেশনের একটি প্রয়োগ দেখাচ্ছে। আপনি দেখতে পাচ্ছেন যে, স্ক্রল করার সাথে সাথে ছবিটি ধীরে ধীরে ভেসে ওঠে।

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

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

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 যতটা সম্ভব কম মেইন থ্রেড রিসোর্স ব্যবহার করার চেষ্টা করে, ফলে ক্লাসিক জাভাস্ক্রিপ্ট পদ্ধতির তুলনায় অ্যানিমেশনগুলো অনেক বেশি মসৃণ হয়।

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

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

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

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