স্ক্রল প্রোগ্রেস ইন্ডিকেটর তৈরি করা

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

কীভাবে প্রয়োগ করতে হয়

স্ক্রল প্রগ্রেস ইন্ডিকেটর তৈরি করতে, আপনার দুটি জিনিস প্রয়োজন:

1. প্রোগ্রেস বার হিসেবে কাজ করার জন্য একটি এলিমেন্ট। এই এলিমেন্ট সাধারণত position: fixed বা position: absolute হয় যাতে ব্যবহারকারী স্ক্রল করার সময় এটি দেখা যায়।
2. স্ক্রল পজিশনের সাথে লিঙ্ক করা অ্যানিমেশন।

আপনি কীভাবে এটি করতে পারবেন তা এখানে দেওয়া হল:

• প্রথমে, একটি HTML এলিমেন্ট তৈরি করুন যা আপনার প্রোগ্রেস বার হিসেবে কাজ করবে। এই এলিমেন্ট আপনার পছন্দ অনুযায়ী স্টাইল করা যাবে।
• এরপর, আপনার CSS-এ, একটি @keyframes অ্যানিমেশন নির্ধারণ করুন যা প্রগ্রেস বারকে স্কেল করে। একটি সাধারণ পদ্ধতি হল এলিমেন্টকে scaleX(0) থেকে scaleX(1)-এ স্কেল করা।
• সবশেষে, আপনার প্রোগ্রেস বার এলিমেন্টে এই অ্যানিমেশন প্রয়োগ করুন এবং এর animation-timeline স্ক্রল-টাইমলাইনে সেট করুন। এটি ব্রাউজারকে নিকটতম অ্যানসেস্টর স্ক্রলারের স্ক্রল পজিশনের উপর ভিত্তি করে অ্যানিমেশনের প্রগ্রেস চালাতে বলে।

কোডের উদাহরণ

এই কোডটি scroll() ফাংশন দ্বারা তৈরি করা একটি বেনামী স্ক্রল-টাইমলাইন ব্যবহার করে স্ক্রলে #progress এলিমেন্টকে বড় করে।

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll())) {
    @keyframes grow-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    #progress {
      position: fixed;
      left: 0; top: 0;
      width: 100%; height: 1em;
      background: red;

      transform-origin: 0 50%;
      animation: grow-progress auto linear;
      animation-timeline: scroll();
    }
  }
}

DOM-এ এর লোকেশনের কারণে, scroll() ফাংশনটি block ডিরেকশনে এর নিকটতম অ্যানসেস্টর স্ক্রলার ট্র্যাক করবে, যা এখানে রুট স্ক্রলার।

<body>
  <!-- MANDATORY: Purely decorative visual scroll progress bars MUST set aria-hidden="true" to remove the empty element from the assistive technology reading tree -->
  <div id="progress" aria-hidden="true"></div>
</body>

এই কোডটি scroll-timeline প্রপার্টি দ্বারা তৈরি করা একটি নামযুক্ত স্ক্রল-টাইমলাইন ব্যবহার করে স্ক্রল করার সময় #progress এলিমেন্টকে বড় করে।

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll())) {
    @keyframes grow-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    :root {
      scroll-timeline: --tl block;
    }

    #progress {
      position: fixed;
      left: 0; top: 0;
      width: 100%; height: 1em;
      background: red;

      transform-origin: 0 50%;
      animation: grow-progress auto linear;
      animation-timeline: --tl;
    }
  }
}

পেশাদার পদ্ধতি

স্ক্রল-চালিত অ্যানিমেশন ব্যবহার করার সময়, মসৃণ ও অ্যাক্সেসযোগ্য অভিজ্ঞতা নিশ্চিত করতে কয়েকটি পেশাদার পদ্ধতি অনুসরণ করা গুরুত্বপূর্ণ:

• ফিচার শনাক্তকরণ অন্তর্ভুক্ত করুন: সব ব্রাউজার স্ক্রল-চালিত অ্যানিমেশন সাপোর্ট করে না। সাপোর্ট চেক করতে @supports (animation-timeline: scroll()) ব্যবহার করুন এবং যেসব ব্রাউজারে এটি কাজ করে না সেগুলির জন্য একটি ফলব্যাক প্রদান করুন।
  • ফলব্যাক স্ট্র্যাটেজির জন্য scroll-timeline-polyfill প্যাকেজ ব্যবহার করবেন না কারণ এটিতে সব ফিচার নেই এবং অনেক পরিচিত সমস্যা আছে।
  • অ্যানিমেশনটি যদি শুধুমাত্র আলংকারিক হিসেবে বিবেচিত হয়, তাহলে প্রোগ্রেসিভ এনহ্যান্সমেন্ট বেছে নিন এবং ফলব্যাক প্রদান করবেন না।
• অবশ্যই সহায়ক প্রযুক্তি রিডিং ফ্লো থেকে সম্পূর্ণ আলঙ্কারিক এলিমেন্ট সরিয়ে দিন: স্ক্রিন রিডার যাতে খালি, নামহীন নোড না পায় তা নিশ্চিত করতে সম্পূর্ণ ভিজ্যুয়াল স্ক্রল ইন্ডিকেটরে aria-hidden="true" প্রয়োগ করুন।
• ব্যবহারকারীর পছন্দকে সম্মান করুন: কিছু ব্যবহারকারী ওয়েবে কম মোশন পছন্দ করেন। এইসব ব্যবহারকারীর জন্য আপনার অ্যানিমেশন বন্ধ করতে বা কমাতে prefers-reduced-motion মিডিয়া কোয়েরি ব্যবহার করুন।
• শুধুমাত্র পারফর্ম্যান্ট CSS প্রপার্টি অ্যানিমেট করার চেষ্টা করুন: সবচেয়ে মসৃণ অ্যানিমেশনের জন্য, ব্রাউজারের কম্পোজিটর থ্রেড দ্বারা ম্যানেজ করা যায় এমন প্রপার্টি অ্যানিমেট করুন, যেমন transform এবং opacity। width বা height-এর মতো অন্যান্য প্রপার্টি অ্যানিমেট করলে পারফর্ম্যান্স সংক্রান্ত সমস্যা হতে পারে।
• সঠিক ডিক্লারেশন অর্ডার ব্যবহার করুন: animation শর্টহ্যান্ড প্রপার্টি ব্যবহার করার সময়, শর্টহ্যান্ড যাতে টাইমলাইন রিসেট না করে দেয়, তার জন্য এটির পরে animation-timeline ডিক্লেয়ার করুন।

স্ক্রল-চালিত অ্যানিমেশন তৈরি করতে scroll() ফাংশন ব্যবহার করার সময়:

• ঐচ্ছিক স্ক্রলার সম্পর্কে স্পষ্ট হোন: নিকটতম অ্যানসেস্টর স্ক্রলারকে টার্গেট না করার সময়, আপনি scroll(root) বা scroll(self)-এর সাথে কোন স্ক্রলার ব্যবহার করতে চান সে সম্পর্কে স্পষ্ট হোন।
  • root, nearest বা self যথেষ্ট না হলে, নামযুক্ত স্ক্রল-টাইমলাইন ব্যবহার করুন।
• ঐচ্ছিক ট্র্যাক করার জন্য অক্ষ সম্পর্কে স্পষ্ট হোন: ডিফল্ট block অক্ষকে টার্গেট না করার সময় (যেমন অনুভূমিক স্ক্রোলারে), scroll(block) বা scroll(inline)-এর মাধ্যমে কোন অক্ষ ট্র্যাক করতে হবে সে সম্পর্কে স্পষ্ট হোন।

স্ক্রল-চালিত অ্যানিমেশন তৈরি করতে scroll-timeline প্রপার্টি ব্যবহার করার সময়:

• নামের জন্য CSS <dashed-ident> ব্যবহার করুন।
• ঐচ্ছিক ট্র্যাক করার জন্য অক্ষ সম্পর্কে স্পষ্ট হোন: ডিফল্ট block অক্ষকে টার্গেট না করার সময় (যেমন একটি অনুভূমিক স্ক্রোলারে), scroll-timeline-axis-এর সাথে কোন অক্ষ ট্র্যাক করতে হবে সে সম্পর্কে স্পষ্ট হোন।
• scroll-timeline ঘোষণা করা এলিমেন্টটি অ্যানিমেট করা এলিমেন্টের ফ্ল্যাট ট্রি পূর্বপুরুষ না হলে, শেয়ার করা পূর্বপুরুষের উপর timeline-scope ব্যবহার করে scroll-timeline-এর নামের দৃশ্যমানতা বাড়ান: লুকআপের স্কোপ কাজ করছে কিনা তা নিশ্চিত করুন।

ফলব্যাক স্ট্র্যাটেজি

যেসব ব্রাউজারে স্ক্রল-চালিত অ্যানিমেশন কাজ করে না, সেখানে ভিজ্যুয়াল এফেক্ট আবার তৈরি করতে আপনি ফলব্যাক ব্যবহার করতে পারেন। ফলব্যাক সাধারণত স্ক্রল লিসেনার (ScrollTimeline এফেক্টের জন্য) বা IntersectionObserver API (ViewTimeline এফেক্টের জন্য) দিয়ে তৈরি করা হয়।

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

মনে রাখবেন, ফলব্যাক অ্যাপ্রোচ ব্যবহার করে সব এফেক্ট আবার তৈরি করা যায় না।

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

<script>
  if (!CSS.supports('animation-timeline', 'scroll()')) {
    const progress = document.querySelector('#progress');

    window.addEventListener('scroll', () => {
      const scrollable = document.documentElement.scrollHeight - window.innerHeight;
      const scrolled = window.scrollY;
      const progressPercentage = (scrolled / scrollable);

      progress.style.transform = `scaleX(${progressPercentage})`;
    });
  }
</script>