স্ক্রলিটেলিং

স্ক্রলিটেলিং হল একটি জনপ্রিয় কৌশল যা আকর্ষক এবং ইমারসিভ ওয়েব অভিজ্ঞতা তৈরি করতে ব্যবহৃত হয়। ব্যবহারকারী স্ক্রল করার সাথে সাথে পৃষ্ঠার এলিমেন্ট অ্যানিমেট করা হয়, যা কার্যকরভাবে কোনও গল্প বলে বা ব্যবহারকারীকে একটি বর্ণনার মাধ্যমে গাইড করে। CSS স্ক্রল-চালিত অ্যানিমেশনের মাধ্যমে, আপনি জাভাস্ক্রিপ্টের উপর নির্ভর না করেই সরাসরি CSS-এ এইসব এফেক্ট তৈরি করতে পারবেন। অ্যানিমেশনগুলি স্ক্রল পজিশন দ্বারা নিয়ন্ত্রিত হয়, সময়-ভিত্তিক ঘড়ি নয়, যা নিশ্চিত করে যে সেগুলি সর্বদা ব্যবহারকারীর স্ক্রলের সাথে সিঙ্ক হয়।

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

স্ক্রলিটেলিং অভিজ্ঞতা তৈরি করতে, আপনার দুটি সেট এলিমেন্ট প্রয়োজন: একটি স্ক্রল পজিশন ট্র্যাক করার জন্য এবং অন্যটি অ্যানিমেট করার জন্য।

প্রথমে, আপনি যে এলিমেন্ট ট্র্যাক করতে চান সেটির জন্য একটি নামযুক্ত view-timeline সংজ্ঞায়িত করুন। এগুলি আপনার অ্যানিমেশনের ড্রাইভার হিসেবে কাজ করবে।

#tracked {
  section:nth-child(1){ view-timeline: --tl-1 block; }
  section:nth-child(2){ view-timeline: --tl-2 block; }
  section:nth-child(3){ view-timeline: --tl-3 block; }
  section:nth-child(4){ view-timeline: --tl-4 block; }
  section:nth-child(5){ view-timeline: --tl-5 block; }
}

এরপর, আপনি যেসব এলিমেন্ট অ্যানিমেট করতে চান সেগুলিতে অ্যানিমেশন প্রয়োগ করুন এবং animation-timeline প্রপার্টি ব্যবহার করে আপনার তৈরি করা টাইমলাইনে সেগুলি লিঙ্ক করুন।

#animated {
  section {
    animation: animate-in auto linear both, animate-out auto linear forwards;
    animation-range: entry 25% cover 50%, exit 50% exit 75%;
  }

  section:nth-child(1){ animation-timeline: --tl-1; }
  section:nth-child(2){ animation-timeline: --tl-2; }
  section:nth-child(3){ animation-timeline: --tl-3; }
  section:nth-child(4){ animation-timeline: --tl-4; }
  section:nth-child(5){ animation-timeline: --tl-5; }
}

animation-timeline যাতে নাম দেওয়া টাইমলাইন রেফারেন্স করতে পারে, তার জন্য সেগুলিকে একই স্কোপে থাকতে হবে। আপনি কোনও সাধারণ অ্যানসেস্টরে timeline-scope প্রপার্টি ব্যবহার করতে পারেন যাতে যেসব এলিমেন্টের টাইমলাইন প্রয়োজন সেগুলি সব এলিমেন্টের জন্য উপলভ্য হয়। :root এলিমেন্টটি প্রায়শই এর জন্য একটি ভাল পছন্দ।

html {
  timeline-scope: --tl-1, --tl-2, --tl-3, --tl-4, --tl-5;
}

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

#animated section {
  animation-range: entry 25% cover 50%, exit 50% exit 75%;
}

কোডের উদাহরণ

html {
  timeline-scope: --tl-1, --tl-2, --tl-3, --tl-4, --tl-5;
}

#tracked {
  section:nth-child(1){ view-timeline: --tl-1 block; }
  section:nth-child(2){ view-timeline: --tl-2 block; }
  section:nth-child(3){ view-timeline: --tl-3 block; }
  section:nth-child(4){ view-timeline: --tl-4 block; }
  section:nth-child(5){ view-timeline: --tl-5 block; }
}

@keyframes animate-in {
  from { scale: 0.5; opacity: 0; transform: rotateY(-180deg); }
  to { transform: rotateY(0deg); }
}
@keyframes animate-out {
  to { translate: 100% 0; opacity: 0; }
}

#animated {
  section {
    animation: animate-in auto linear both, animate-out auto linear forwards;
    animation-range: entry 25% cover 50%, exit 50% exit 75%;
    backface-visibility: hidden;
  }

  section:nth-child(1){ animation-timeline: --tl-1; }
  section:nth-child(2){ animation-timeline: --tl-2; }
  section:nth-child(3){ animation-timeline: --tl-3; }
  section:nth-child(4){ animation-timeline: --tl-4; }
  section:nth-child(5){ animation-timeline: --tl-5; }
}

/* MANDATORY Copy-Paste Safety: Disable continuous storytelling motion for sensitive users */
@media (prefers-reduced-motion: reduce) {
  #animated section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

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

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

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

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

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

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

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

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

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

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

const animatedSections = document.querySelectorAll('#animated section');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const sectionIndex = Array.from(document.querySelectorAll('#tracked section')).indexOf(entry.target);
    if (sectionIndex !== -1) {
      const animatedSection = animatedSections[sectionIndex];
      const ratio = entry.intersectionRatio;

      // Animate-in
      animatedSection.style.opacity = ratio;
      animatedSection.style.transform = `scale(${0.5 + ratio * 0.5}) rotateY(${-180 + ratio * 180}deg)`;

      // Animate-out
      if (ratio < 0.5) {
        animatedSection.style.translate = `${(0.5 - ratio) * 2 * 100}% 0`;
      } else {
        animatedSection.style.translate = '0 0';
      }
    }
  });
}, { threshold: Array.from({length: 101}, (_, i) => i / 100) });

document.querySelectorAll('#tracked section').forEach(section => {
  observer.observe(section);
});

এবং এর সাথে থাকা CSS:

#animated section {
  opacity: 0;
  transform: scale(0.5)  rotateY(-180deg);
  backface-visibility: hidden;
}

/* MANDATORY Copy-Paste Safety: Ensure content remains fully visible and legible for assistive technologies or users with motion sensitivities */
@media (prefers-reduced-motion: reduce) {
  #animated section {
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
  }
}

এই ফলব্যাকটি এমন ব্রাউজারগুলির জন্য আরও সঠিক, স্ক্রল-চালিত অ্যানিমেশন প্রদান করে যা নেটিভ CSS ফিচারকে সমর্থন করে না, সমস্ত ব্যবহারকারীর জন্য আরও সামঞ্জস্যপূর্ণ অভিজ্ঞতা নিশ্চিত করে। IntersectionObserver-এর জন্য একাধিক থ্রেশহোল্ড ব্যবহার করে, আমরা আরও নির্ভুলভাবে স্ক্রল পজিশন ট্র্যাক করতে এবং আরও স্মুথ অ্যানিমেশন তৈরি করতে পারি।