স্ক্রলপোর্টে প্রবেশ বা বের হওয়ার সময় এলিমেন্টে প্রবেশ ও বের হওয়ার এফেক্ট যোগ করুন

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

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

কোনও এলিমেন্টে এন্ট্রি ও এক্সিট এফেক্ট যোগ করতে, আপনাকে কয়েকটি CSS প্রপার্টি একত্রিত করতে হবে। এখানে ধাপে-ধাপে গাইড দেওয়া হল:

1. এন্ট্রি ও এক্সিট অ্যানিমেশনের জন্য আলাদা @keyframes তৈরি করুন। এলিমেন্ট ভিউপোর্টে প্রবেশ করার সময় প্রবেশ করার অ্যানিমেশন এবং বেরিয়ে যাওয়ার সময় বেরিয়ে যাওয়ার অ্যানিমেশন প্রয়োগ করা হবে।

   @keyframes slide-in {
     from { transform: translateX(-100%); }
   }
   @keyframes slide-out {
     to { transform: translateX(100%); }
   }
   

2. এলিমেন্টে এন্ট্রি ও এক্সিট কীফ্রেম অ্যাটাচ করুন। animation প্রপার্টিতে একাধিক অ্যানিমেশন সংজ্ঞায়িত করে আপনি এটি করতে পারবেন।

   • এন্ট্রি অ্যানিমেশনে backwards-এর animation-fill-mode দিন যাতে অ্যানিমেশন শুরু হওয়ার আগে এটি প্রাথমিক অবস্থায় প্রয়োগ করা যায়।
   • এক্সিট অ্যানিমেশনে forwards-এর animation-fill-mode দিন যাতে অ্যানিমেশন সম্পূর্ণ হওয়ার পরে এটি তার চূড়ান্ত অবস্থা বজায় রাখে।

   .animated-element {
     animation:
       slide-in 1s linear backwards,
       slide-out 1s linear forwards;
   }
   

3. একটি ভিউ টাইমলাইন তৈরি করুন এবং এটিকে অ্যানিমেশনের সাথে লিঙ্ক করুন। ভিউ টাইমলাইন হল এক ধরনের টাইমলাইন যা ভিউপোর্টে কোনও এলিমেন্টের ভিজিবিলিটির সাথে লিঙ্ক করা থাকে। আপনি view() ফাংশন ব্যবহার করে একটি তৈরি করতে পারেন এবং তারপরে animation-timeline প্রপার্টি ব্যবহার করে আপনার অ্যানিমেশনে এটি প্রয়োগ করতে পারেন।

   .animated-element {
     animation-timeline: view();
   }
   

   ডিফল্ট হিসেবে, view() block অক্ষে এলিমেন্ট ট্র্যাক করে। inline অক্ষে এটি ট্র্যাক করতে হলে, আপনি view(inline) ব্যবহার করতে পারেন।

4. অ্যানিমেশনকে entry ও exit রেঞ্জের মধ্যে সীমিত রাখুন। animation-range প্রপার্টি আপনাকে টাইমলাইনের কোন অংশে অ্যানিমেশন চালানো উচিত তা নির্দিষ্ট করতে দেয়।

   • entry রেঞ্জটি এলিমেন্টটি প্রথমবার ভিউপোর্টে প্রবেশ করার সময় থেকে শুরু করে এটি সম্পূর্ণ দৃশ্যমান না হওয়া পর্যন্ত সময়কে কভার করে।
   • exit রেঞ্জটি সেই সময়কে কভার করে যখন এলিমেন্টটি ভিউপোর্ট থেকে সরে যেতে শুরু করে যতক্ষণ না এটি সম্পূর্ণভাবে লুকানো হয়।

   .animated-element {
     animation-range: entry, exit;
   }
   

কোডের উদাহরণ

এই কোডটি অ্যানোনিমাস ভিউ-টাইমলাইন ব্যবহার করে স্ক্রল করার সময় স্ক্রলারের ডাইরেক্ট চিল্ড্রেনকে অ্যানিমেট করে:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: view(inline);
      animation-range: entry, exit;
    }
  }
}

এলিমেন্ট স্ক্রলপোর্টে প্রবেশ করার সাথে সাথে grow অ্যানিমেশন চালানো হয় এবং স্ক্রলপোর্ট থেকে বেরিয়ে যাওয়ার সাথে সাথে shrink অ্যানিমেশন চালানো হয়।

নিম্নলিখিত কোডের ভিজ্যুয়াল ফলাফল একই, তবে নামযুক্ত ভিউ-টাইমলাইন ব্যবহার করে স্ক্রল করার সময় স্ক্রলারের ডাইরেক্ট চাইল্ডকে অ্যানিমেট করে:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      view-timeline: --tl inline;
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: --tl;
      animation-range: entry, exit;
    }
  }
}

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

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

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

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

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

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

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

ট্র্যাক করা সাবজেক্টের একাধিক এলিমেন্ট বা চাইল্ড অ্যানিমেট করার প্রয়োজন হলে, নাম দেওয়া view-timeline বেছে নিন।

ব্রাউজার সাপোর্ট ও ফলব্যাক স্ট্র্যাটেজি

তাই, সাধারণত একটি ফলব্যাক স্ট্র্যাটেজি প্রয়োজন হয়।

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

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

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

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

<script>
  if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          // This matches the effect as defined in the CSS example above.
          // Customize this further if needed.
          entry.target.style.scale = 0.5 + entry.intersectionRatio * 0.5;
        }
      },
      {
        threshold: Array.from({ length: 101 }, (_, i) => i / 100),
      }
    );

    document.querySelectorAll('.scroller > *').forEach((el) => {
      observer.observe(el);
    });
  }
</script>