সিএসএস স্ক্রোল-ট্রিগারড অ্যানিমেশন আসছে!

Bramus

প্রকাশিত: ১২ ডিসেম্বর, ২০২৫

২০২৩ সালে আমরা স্ক্রোল-চালিত অ্যানিমেশন পাঠিয়েছিলাম যা আপনাকে স্ক্রোলিংয়ের মাধ্যমে একটি অ্যানিমেশনকে এগিয়ে (অথবা রিওয়াইন্ড) করতে দেয়। স্ক্রোল-চালিত অ্যানিমেশনের মাধ্যমে, স্ক্রোল করার সাথে সাথে অ্যানিমেশনের অগ্রগতি ০% থেকে ১০০% পর্যন্ত বৃদ্ধি পায়। আপনি যদি স্ক্রোল করা বন্ধ করেন, তাহলে অ্যানিমেশনটি থেমে যায়; যদি আপনি আবার উপরে স্ক্রোল করেন, তাহলে অ্যানিমেশনটি বিপরীত হয়।

স্ক্রোল-ভিত্তিক অ্যানিমেশনের পরবর্তী অধ্যায়টি ২০২৬ সালে আসবে, স্ক্রোল-ট্রিগার করা অ্যানিমেশনগুলি Chrome 145-এ অবতরণ করবে। এগুলি হল সময়-ভিত্তিক অ্যানিমেশন যা একটি নির্দিষ্ট স্ক্রোল অফসেট অতিক্রম করার সময় ট্রিগার হয়।

এই ধরণের ইফেক্টের জন্য IntersectionObserver কে বিদায় জানান, কারণ আপনি এখন CSS তে এটি ঘোষণামূলকভাবে করতে পারেন।

টাইমলাইন ট্রিগার, অ্যানিমেশন ট্রিগার এবং অ্যাকশন

একটি অ্যানিমেশন ট্রিগার করুন

CSS-এ স্ক্রল-ট্রিগারড অ্যানিমেশন সেট আপ করতে, একটি এলিমেন্টের সাথে সংযুক্ত একটি নিয়মিত CSS অ্যানিমেশন দিয়ে শুরু করুন:

animation: unclip 0.35s ease-in-out both;

এই অ্যানিমেশনটি একটি DocumentTimeline ড্রাইভার হিসেবে ব্যবহার করে এবং 0.35 সেকেন্ড ধরে চলে। পৃষ্ঠা লোড হওয়ার পর অ্যানিমেশনটি স্বয়ংক্রিয়ভাবে ট্রিগার হয়। ট্রিগার পরিবর্তন করতে, নতুন animation-trigger CSS প্রোপার্টি ব্যবহার করুন:

animation-trigger: --t play-forwards play-backwards;

এখানে, অ্যানিমেশনটি ট্রিগার --t দ্বারা ট্রিগার হওয়ার জন্য সেট করা আছে। যখন সেই ট্রিগারটি সক্রিয় হয়, তখন অ্যানিমেশনে play-forwards অ্যাকশনটি চালু হয় এবং যখন ট্রিগারটি নিষ্ক্রিয় হয়, তখন play-backwards অ্যাকশনটি চালু হয়।

স্পেসিফিকেশনে কর্মের সম্পূর্ণ তালিকা রয়েছে।

একটি ট্রিগার তৈরি করুন

কিন্তু সেই --t ট্রিগারটি কী? এটি --t নামে একটি ট্রিগার। বিশেষ করে স্ক্রোল-ট্রিগার করা অ্যানিমেশনের জন্য, এটি একটি "টাইমলাইন ট্রিগার" যা একটি স্ক্রোল প্রোগ্রেস টাইমলাইন বা ভিউ প্রোগ্রেস টাইমলাইনকে এর উৎস হিসেবে ব্যবহার করে।

একটি টাইমলাইন ট্রিগার সংজ্ঞায়িত করতে, timeline-trigger বৈশিষ্ট্য (অথবা এর সাথে সম্পর্কিত longhands) ব্যবহার করুন। উদাহরণস্বরূপ, --t নামে একটি ট্রিগার তৈরি করতে যা একটি ভিউ টাইমলাইনকে তার উৎস হিসাবে ব্যবহার করে, নিম্নলিখিতটি ব্যবহার করুন:

timeline-trigger-name: --t;
timeline-trigger-source: view();

এই তৈরি ট্রিগার --t মিলিত উপাদানের সাথে সম্পর্কিত ভিউ টাইমলাইনের উপর ভিত্তি করে সক্রিয় এবং নিষ্ক্রিয় করে। যেহেতু একটি ভিউ টাইমলাইনের ডিফল্ট পরিসর হল cover পরিসর , তাই ট্রিগারটি সেই পরিসরের মধ্যে বা বাইরে থাকাকালীন সক্রিয় এবং নিষ্ক্রিয় করে।

ট্রিগারের রেঞ্জ পরিবর্তন করুন

ট্রিগারটি কখন সক্রিয় বা নিষ্ক্রিয় থাকা উচিত তার অবস্থান পরিবর্তন করতে, ট্রিগারে সক্রিয়করণ এবং সক্রিয় পরিসরগুলি নির্দিষ্ট করুন। নিম্নলিখিত উদাহরণে, সক্রিয়করণ পরিসরটি entry 100% exit 0% এ সেট করা আছে, যার অর্থ হল বিষয়টি সেই পরিসরের মধ্যে থাকলে ট্রিগারটি সক্রিয় হবে।

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

যেহেতু পূর্ববর্তী স্নিপেটে কোনও সক্রিয় পরিসর নির্দিষ্ট করা নেই, তাই সক্রিয়করণ পরিসরটি সক্রিয় পরিসর হিসাবেও ব্যবহৃত হয়। যখন সেই সক্রিয় পরিসরের বাইরে থাকে, তখন ট্রিগারটি নিষ্ক্রিয় হয়ে যায়।

ইতিমধ্যেই সংজ্ঞায়িত animation-trigger সাথে একত্রিত হলে, বিষয়টি যখন সম্পূর্ণরূপে স্ক্রোলপোর্টে প্রবেশ করে তখন অ্যানিমেশনটি সামনের দিকে বাজতে দেখা যায় এবং যখন এটি স্ক্রোলপোর্ট ছেড়ে যাওয়ার সময় পিছনের দিকে বাজতে দেখা যায়।

বিভিন্ন অ্যাক্টিভেশন এবং অ্যাক্টিভ রেঞ্জ থাকা সম্ভব। উদাহরণস্বরূপ:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

এখানে, যখন সাবজেক্টটি entry 100% exit 0% রেঞ্জে থাকে তখন ট্রিগারটি সক্রিয় হয়। ট্রিগারটি entry 0% exit 100% রেঞ্জ ছেড়ে না যাওয়া পর্যন্ত সক্রিয় থাকে।

দৃশ্যত এর ফলে সাবজেক্ট স্ক্রোলপোর্টে প্রবেশ করলে অ্যানিমেশনটি সামনের দিকে বাজতে থাকে এবং আগের মতো নয়, সাবজেক্টটি স্ক্রোলপোর্ট থেকে সম্পূর্ণরূপে বেরিয়ে না আসা পর্যন্ত এটি সক্রিয় থাকবে।

ট্রিগারের পরিধি সীমিত করুন

ট্রিগারগুলি বিশ্বব্যাপী দৃশ্যমান, অর্থাৎ, একটি নির্দিষ্ট নামের ট্রিগার ঘোষণাকারী শেষ ম্যাচটি "জয়" করে। ট্রিগারের দৃশ্যমানতা সীমিত করতে, trigger-scope বৈশিষ্ট্যটি ব্যবহার করুন। এটি anchor-scope কীভাবে ব্যবহার করা যেতে পারে তার অনুরূপ।

trigger-scope: --t; /* List of dashed idents, or `all` */

যখন আপনার কাছে এমন একটি CSS নিয়ম থাকে যা একটি ট্রিগার ঘোষণা করে এবং একাধিক উপাদানের সাথে মেলে, তখন আপনাকে trigger-scope ব্যবহার করতে হবে।

ডেমো

নিম্নলিখিত ডেমোতে, একটি ফর্মকে বিভিন্ন পূর্ণ উচ্চতার অংশে বিভক্ত করা হয়েছে। ফর্মের প্রতিটি অংশ দৃশ্যমান হওয়ার সাথে সাথে এটি একটি স্ক্রোল-ট্রিগার করা অ্যানিমেশন ব্যবহার করে অ্যানিমেট করে। স্ক্রোলপোর্ট থেকে বের হওয়ার সময়, এটি অ্যানিমেট করে।

এর জন্য স্ক্রোল-ট্রিগার করা অ্যানিমেশন লজিক হল:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

ব্যবচ্ছেদ করা হয়েছে, কোডটি লেখা আছে:

• timeline-trigger নামকরণ করা হয়েছে --t এবং এর উৎসটি একটি ভিউ টাইমলাইনে সেট করা হয়েছে যা মিলিত উপাদানটি ট্র্যাক করে।
• ট্রিগারের অ্যাক্টিভেশন রেঞ্জ হল contain 15% contain 85% । যখন সাবজেক্টটি সেই রেঞ্জের মধ্যে থাকে, তখন ট্রিগারটি সক্রিয় হয়ে যায়।
• সক্রিয় করা হলে, ট্রিগারটি ততক্ষণ সক্রিয় থাকে যতক্ষণ পর্যন্ত বিষয় entry 100% exit 0% এর সক্রিয় পরিসরে থাকে।
• unclip অ্যানিমেশনটি এলিমেন্টের সাথে সংযুক্ত করা হয়েছে।
• অ্যানিমেশনটি তার ট্রিগার উৎস হিসেবে --t ব্যবহার করার জন্য সেট করা আছে। ট্রিগার সক্রিয় হয়ে গেলে, অ্যানিমেশনটি সামনের দিকে চলতে শুরু করে।
• যখন ট্রিগারটি নিষ্ক্রিয় হয়ে যায় - যা তখন ঘটে যখন বিষয় সক্রিয় পরিসর ছেড়ে যায় - তখন অ্যানিমেশনটি বিপরীত দিকে বাজতে থাকে।
• একই ট্রিগার --t ব্যবহার করে কার্ডের বিষয়বস্তু ভিতরে এবং বাইরে অ্যানিমেট করা যায়।

উদাহরণটিতে timeline-trigger সমর্থন না থাকা ব্রাউজারগুলির জন্য IntersectionObserver ব্যবহার করে একটি ফলব্যাক অন্তর্ভুক্ত রয়েছে।

আরও ডেমো

যদি আপনি স্ক্রোল-ট্রিগার করা অ্যানিমেশনগুলি যথেষ্ট পরিমাণে না পান, তাহলে নিম্নলিখিত ডেমোগুলি দেখুন:

• ফ্লাই-ইন টেক্সট
• দানবদের সাথে দেখা করুন (স্ক্রোলিটেলিং)
• আকার পরিবর্তন

প্রতিক্রিয়া

এই বৈশিষ্ট্যটি আরও উন্নত করার জন্য আমরা প্রতিক্রিয়া জানতে আগ্রহী। সোশ্যাল মিডিয়াতে আমাদের সাথে যোগাযোগ করুন, অথবা প্রতিক্রিয়া জানাতে CSS ওয়ার্কিং গ্রুপে একটি সমস্যা দায়ের করুন ।

যদি আপনি কোনও বাগের সম্মুখীন হন, তাহলে আমাদের জানাতে একটি Chromium বাগ ফাইল করুন । পরিচিত বাগের তালিকা: Chromium বাগ ট্র্যাকার দেখুন।