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

Yuriko Hirota

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

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

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

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

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

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

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

স্ক্রোল-চালিত অ্যানিমেশন 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 সংস্করণটি ভারী জাভাস্ক্রিপ্টের কাজ দ্বারা সম্পূর্ণরূপে প্রভাবিত নয় এবং ব্যবহারকারীর স্ক্রোল ইন্টারঅ্যাকশনের প্রতিক্রিয়া জানাতে পারে।

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

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

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

নতুন 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 (WAAPI) এবং CSS অ্যানিমেশন API-এর সাথে একত্রে কাজ করে ঘোষণামূলক স্ক্রোল-চালিত অ্যানিমেশনগুলি সক্ষম করতে।

আরো ডেমো এবং সম্পদ

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

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