সিএসএস স্ক্রোল-ড্রিভেন অ্যানিমেশন আয়ত্ত করা: টাইমলাইন সিনক্রোনাইজেশনের এক গভীর বিশ্লেষণ

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

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

এই বিশদ গাইডে, আমরা সিএসএস স্ক্রোল-ড্রিভেন অ্যানিমেশন টাইমলাইনের মূল ধারণাগুলি অন্বেষণ করব এবং সেগুলি সিনক্রোনাইজ করার জন্য প্রয়োজনীয় কৌশলগুলির গভীরে প্রবেশ করব। আপনি স্তরযুক্ত প্যারালাক্স ইফেক্ট, ক্রমানুসারে গল্প বলার প্রকাশ এবং জটিল কম্পোনেন্ট ইন্টারঅ্যাকশন তৈরি করতে শিখবেন—সবই বিশুদ্ধ সিএসএস দিয়ে। আমরা আলোচনা করব:

• `scroll()` এবং `view()` টাইমলাইনের মধ্যে মৌলিক পার্থক্য।
• একাধিক উপাদান সিনক্রোনাইজ করার জন্য নামযুক্ত টাইমলাইনের বিপ্লবী ধারণা।
• `animation-range` ব্যবহার করে অ্যানিমেশন প্লেব্যাকের উপর সূক্ষ্ম নিয়ন্ত্রণ।
• বাস্তব-বিশ্বের উদাহরণ এবং কোড যা আপনি আজই ব্যবহার করতে পারেন।
• পারফরম্যান্স, অ্যাক্সেসিবিলিটি এবং ব্রাউজার সামঞ্জস্যের জন্য সেরা অনুশীলন।

সিএসএস দিয়ে যা সম্ভব তা নিয়ে নতুন করে ভাবতে প্রস্তুত হন এবং আপনার ওয়েব অভিজ্ঞতাকে ইন্টারঅ্যাক্টিভিটি এবং পলিশের একটি নতুন স্তরে উন্নীত করুন।

ভিত্তি: অ্যানিমেশন টাইমলাইন বোঝা

অ্যানিমেশন সিনক্রোনাইজ করার আগে, আমাদের প্রথমে সেই প্রক্রিয়াটি বুঝতে হবে যা সেগুলিকে চালিত করে। ঐতিহ্যগতভাবে, একটি সিএসএস অ্যানিমেশনের টাইমলাইন সময়ের অগ্রগতির উপর ভিত্তি করে তৈরি হয়, যা তার `animation-duration` দ্বারা সংজ্ঞায়িত। স্ক্রোল-ড্রিভেন অ্যানিমেশনের মাধ্যমে, আমরা সময়ের সাথে এই সংযোগটি ছিন্ন করি এবং পরিবর্তে অ্যানিমেশনের অগ্রগতিকে একটি নতুন উৎসের সাথে সংযুক্ত করি: একটি প্রোগ্রেস টাইমলাইন।

এটি প্রধানত `animation-timeline` প্রপার্টির মাধ্যমে অর্জন করা হয়। অ্যানিমেশনটিকে ট্রিগার করার পর নিজে থেকে চলতে দেওয়ার পরিবর্তে, এই প্রপার্টি ব্রাউজারকে একটি নির্দিষ্ট টাইমলাইনের অগ্রগতির উপর ভিত্তি করে অ্যানিমেশনের কীফ্রেমগুলির মধ্যে দিয়ে স্ক্রাব করতে বলে। যখন টাইমলাইন ০%-এ থাকে, তখন অ্যানিমেশনটি তার ০% কীফ্রেমে থাকে। যখন টাইমলাইন ৫০%-এ থাকে, তখন অ্যানিমেশনটি তার ৫০% কীফ্রেমে থাকে, এবং এভাবেই চলতে থাকে।

সিএসএস স্পেসিফিকেশন এই প্রোগ্রেস টাইমলাইনগুলি তৈরি করার জন্য দুটি প্রধান ফাংশন প্রদান করে:

1. `scroll()`: একটি নামহীন টাইমলাইন তৈরি করে যা একটি স্ক্রোলিং কন্টেইনারের (একটি স্ক্রোলার) স্ক্রোল অগ্রগতি ট্র্যাক করে।
2. `view()`: একটি নামহীন টাইমলাইন তৈরি করে যা ভিউপোর্টের (বা যেকোনো স্ক্রোলার) মধ্যে দিয়ে যাওয়ার সময় একটি নির্দিষ্ট উপাদানের দৃশ্যমানতা ট্র্যাক করে।

আসুন একটি শক্ত ভিত্তি তৈরি করার জন্য এগুলির প্রত্যেকটি বিস্তারিতভাবে পরীক্ষা করি।

গভীর বিশ্লেষণ: `scroll()` প্রোগ্রেস টাইমলাইন

`scroll()` কী?

`scroll()` ফাংশনটি সেইসব অ্যানিমেশনের জন্য আদর্শ যা একটি পৃষ্ঠা বা একটি নির্দিষ্ট স্ক্রোলযোগ্য উপাদানের সামগ্রিক স্ক্রোলিং অগ্রগতির সাথে সম্পর্কিত হওয়া উচিত। এর একটি ক্লাসিক উদাহরণ হলো একটি আর্টিকেলের শীর্ষে থাকা একটি রিডিং প্রোগ্রেস বার যা ব্যবহারকারীর পৃষ্ঠাটি নিচে স্ক্রোল করার সাথে সাথে পূর্ণ হতে থাকে।

এটি পরিমাপ করে যে একজন ব্যবহারকারী একটি স্ক্রোলারের মধ্যে কতটা স্ক্রোল করেছে। ডিফল্টরূপে, এটি পুরো ডকুমেন্টের স্ক্রোল অবস্থান ট্র্যাক করে, তবে এটিকে পৃষ্ঠার যেকোনো স্ক্রোলযোগ্য কন্টেইনার ট্র্যাক করার জন্য কনফিগার করা যেতে পারে।

সিনট্যাক্স এবং প্যারামিটার

`scroll()` ফাংশনের প্রাথমিক সিনট্যাক্সটি নিম্নরূপ:

animation-timeline: scroll(<scroller> <axis>);

আসুন এর প্যারামিটারগুলি ভেঙে দেখি:

• `<scroller>` (ঐচ্ছিক): এটি নির্দিষ্ট করে যে কোন স্ক্রোল কন্টেইনারের অগ্রগতি ট্র্যাক করা উচিত।
  • root: ডিফল্ট মান। এটি ডকুমেন্টের ভিউপোর্ট স্ক্রোলার (প্রধান পৃষ্ঠা স্ক্রোলবার) প্রতিনিধিত্ব করে।
  • self: উপাদানটির নিজের স্ক্রোল অবস্থান ট্র্যাক করে, যদি এটি একটি স্ক্রোল কন্টেইনার হয় (যেমন, `overflow: scroll` আছে)।
  • nearest: নিকটতম পূর্বপুরুষ স্ক্রোল কন্টেইনারের স্ক্রোল অবস্থান ট্র্যাক করে।
• `<axis>` (ঐচ্ছিক): এটি ট্র্যাক করার জন্য স্ক্রোল অক্ষ নির্ধারণ করে।
  • block: ডিফল্ট মান। ব্লক অক্ষ বরাবর অগ্রগতি ট্র্যাক করে (ইংরেজি ভাষার মতো অনুভূমিক লেখার মোডের জন্য উল্লম্ব)।
  • inline: ইনলাইন অক্ষ বরাবর অগ্রগতি ট্র্যাক করে ( ইংরেজির জন্য অনুভূমিক)।
  • y: উল্লম্ব অক্ষের জন্য একটি সুস্পষ্ট উপনাম।
  • x: অনুভূমিক অক্ষের জন্য একটি সুস্পষ্ট উপনাম।

ব্যবহারিক উদাহরণ: একটি পেজ স্ক্রোল প্রোগ্রেস বার

আসুন সেই ক্লাসিক রিডিং প্রোগ্রেস ইন্ডিকেটর তৈরি করি। এটি `scroll()`-এর সবচেয়ে সহজ ফর্মের একটি নিখুঁত প্রদর্শন।

HTML কাঠামো:

            <div class="progress-bar"></div>
<article>
  <h1>A Long Article Title</h1>
  <p>... a lot of content here ...</p>
  <p>... more content to make the page scrollable ...</p>
</article>
            

              
                Copy
              
            
          

CSS প্রয়োগ:

            /* Define the keyframes for the progress bar */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Style the progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: dodgerblue;
  transform-origin: left; /* Animate scale from the left side */

  /* Link the animation to the scroll timeline */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

/* Basic body styling for demonstration */
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 2rem;
  height: 300vh; /* Ensure there is plenty to scroll */
}
            

              
                Copy
              
            
          

ব্যাখ্যা:

1. আমরা একটি সহজ `grow-progress` অ্যানিমেশন সংজ্ঞায়িত করি যা একটি উপাদানকে অনুভূমিকভাবে ০ থেকে ১ পর্যন্ত স্কেল করে।
2. `.progress-bar` ভিউপোর্টের শীর্ষে ফিক্সড করা আছে।
3. ম্যাজিকটি শেষ দুটি প্রপার্টিতে ঘটে। আমরা `grow-progress` অ্যানিমেশনটি প্রয়োগ করি। গুরুত্বপূর্ণভাবে, এটিকে একটি সময়কাল (যেমন `1s`) দেওয়ার পরিবর্তে, আমরা এর `animation-timeline`-কে `scroll(root block)`-এ সেট করি।
4. এটি ব্রাউজারকে বলে: "এই অ্যানিমেশনটি সময়ের সাথে প্লে করো না। পরিবর্তে, ব্যবহারকারী যখন রুট ডকুমেন্টটি উল্লম্বভাবে (`block` অক্ষ) স্ক্রোল করবে, তখন এর কীফ্রেমগুলির মধ্যে দিয়ে স্ক্রাব করো।"

যখন ব্যবহারকারী পৃষ্ঠার একেবারে শীর্ষে থাকবে (০% স্ক্রোল অগ্রগতি), তখন বারের `scaleX` হবে ০। যখন তারা একেবারে নিচে থাকবে (১০০% স্ক্রোল অগ্রগতি), তখন এর `scaleX` হবে ১। ফলাফল হলো একটি নিখুঁতভাবে মসৃণ প্রোগ্রেস ইন্ডিকেটর, কোনো জাভাস্ক্রিপ্টের প্রয়োজন ছাড়াই।

নৈকট্যের শক্তি: `view()` প্রোগ্রেস টাইমলাইন

`view()` কী?

যেখানে `scroll()` একটি কন্টেইনারের সামগ্রিক অগ্রগতি সম্পর্কে, সেখানে `view()` একটি স্ক্রোলারের দৃশ্যমান এলাকার মধ্যে একটি একক উপাদানের যাত্রা সম্পর্কে। এটি "অ্যানিমেট অন রিভিল" প্যাটার্নের জন্য একটি নেটিভ সিএসএস সমাধান, যেখানে উপাদানগুলি স্ক্রিনে প্রবেশ করার সাথে সাথে ফেড ইন, স্লাইড আপ বা অন্য কোনোভাবে অ্যানিমেট হয়।

`view()` টাইমলাইন শুরু হয় যখন একটি উপাদান স্ক্রোলপোর্টে প্রথমবার দৃশ্যমান হয় এবং শেষ হয় যখন এটি সম্পূর্ণরূপে দৃশ্যের বাইরে চলে যায়। এটি আমাদের ০% থেকে ১০০% পর্যন্ত একটি টাইমলাইন দেয় যা সরাসরি একটি উপাদানের দৃশ্যমানতার সাথে বাঁধা, যা রিভিল ইফেক্টের জন্য এটিকে অবিশ্বাস্যভাবে স্বজ্ঞাত করে তোলে।

সিনট্যাক্স এবং প্যারামিটার

`view()`-এর সিনট্যাক্সটি কিছুটা ভিন্ন:

animation-timeline: view(<axis> <view-timeline-inset>);

• `<axis>` (ঐচ্ছিক): `scroll()`-এর মতোই (`block`, `inline`, `y`, `x`)। এটি নির্ধারণ করে যে স্ক্রোলপোর্টের কোন অক্ষ বরাবর উপাদানটির দৃশ্যমানতা ট্র্যাক করা হবে।
• `<view-timeline-inset>` (ঐচ্ছিক): এটি একটি শক্তিশালী প্যারামিটার যা আপনাকে "সক্রিয়" ভিউপোর্টের সীমানা সামঞ্জস্য করতে দেয়। এটি একটি বা দুটি মান গ্রহণ করতে পারে (যথাক্রমে শুরু এবং শেষের ইনসেটের জন্য)। আপনি শতাংশ বা নির্দিষ্ট দৈর্ঘ্য ব্যবহার করতে পারেন। উদাহরণস্বরূপ, `100px 20%` মানে টাইমলাইনটি ভিউপোর্টকে উপর থেকে 100px দূরে শুরু এবং নিচ থেকে 20% দূরে শেষ বলে মনে করে। এটি স্ক্রিনে উপাদানের অবস্থানের সাপেক্ষে অ্যানিমেশন কখন শুরু এবং শেষ হবে তা সূক্ষ্মভাবে টিউন করার সুযোগ দেয়।

ব্যবহারিক উদাহরণ: রিভিল করার সময় ফেড-ইন

আসুন একটি ক্লাসিক ইফেক্ট তৈরি করি যেখানে কন্টেন্ট কার্ডগুলি স্ক্রিনে স্ক্রোল করার সাথে সাথে ভিউতে ফেড এবং স্লাইড হয়ে আসে।

HTML কাঠামো:

            <section class="content-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</section>
            

              
                Copy
              
            
          

CSS প্রয়োগ:

            /* Define keyframes for the reveal animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  /* Apply the animation to each card */
  animation: fade-in-up linear;
  animation-timeline: view(); /* This is it! */

  /* Other styling */
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
  min-height: 200px;
  display: grid;
  place-content: center;
  font-size: 2rem;
}

/* Layout styling */
.content-grid {
  display: grid;
  gap: 2rem;
  padding: 10vh 2rem;
}
            

              
                Copy
              
            
          

ব্যাখ্যা:

1. `fade-in-up` কীফ্রেমগুলি আমাদের কাঙ্ক্ষিত অ্যানিমেশনটি সংজ্ঞায়িত করে: স্বচ্ছ এবং কিছুটা নিচে থেকে শুরু, অস্বচ্ছ এবং চূড়ান্ত অবস্থানে শেষ।
2. প্রতিটি `.card` উপাদানে এই অ্যানিমেশনটি প্রয়োগ করা হয়।
3. গুরুত্বপূর্ণ লাইনটি হলো `animation-timeline: view();`। এটি প্রতিটি কার্ডের জন্য একটি অনন্য, নামহীন টাইমলাইন তৈরি করে।
4. প্রতিটি স্বতন্ত্র কার্ডের জন্য, এর অ্যানিমেশন ০%-এ থাকবে যখন এটি ভিউপোর্টে প্রবেশ করতে শুরু করবে এবং ১০০%-এ পৌঁছাবে যখন এটি ভিউপোর্ট থেকে বের হওয়া শেষ করবে।

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

মূল বিষয়: অ্যানিমেশন সিনক্রোনাইজেশন

নামহীন `scroll()` এবং `view()` টাইমলাইন ব্যবহার করা বিচ্ছিন্ন ইফেক্টের জন্য শক্তিশালী। কিন্তু যদি আমরা চাই যে একাধিক উপাদান একই টাইমলাইনে প্রতিক্রিয়া দেখাক? একটি প্যারালাক্স ইফেক্টের কথা ভাবুন যেখানে একটি ব্যাকগ্রাউন্ড ইমেজ, একটি শিরোনাম এবং একটি ফোরগ্রাউন্ড উপাদান বিভিন্ন গতিতে চলে কিন্তু সবই একই স্ক্রোল অ্যাকশন দ্বারা চালিত হয়। অথবা একটি পণ্যের ছবি যা আপনি তার বৈশিষ্ট্যগুলির একটি তালিকার পাশ দিয়ে স্ক্রোল করার সময় রূপান্তরিত হয়।

এখানেই সিনক্রোনাইজেশন আসে, এবং এর চাবিকাঠি হলো নামহীন টাইমলাইন থেকে নামযুক্ত টাইমলাইনে যাওয়া।

কেন সিনক্রোনাইজ করতে হবে?

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

• জটিল প্যারালাক্স ইফেক্ট: একটি একক স্ক্রোল ট্রিগারের সাপেক্ষে বিভিন্ন স্তরকে বিভিন্ন গতিতে সরিয়ে গভীরতার অনুভূতি তৈরি করা।
• সমন্বিত কম্পোনেন্ট স্টেট: একটি জটিল UI কম্পোনেন্টের বিভিন্ন অংশকে একসাথে অ্যানিমেট করা যখন এটি স্ক্রোল করে ভিউতে আসে।
• ভিজ্যুয়াল স্টোরিটেলিং: একটি আখ্যানের মাধ্যমে ব্যবহারকারীকে গাইড করার জন্য একটি সতর্কভাবে পরিকল্পিত ক্রমানুসারে উপাদানগুলিকে প্রকাশ এবং রূপান্তর করা।

কৌশল: শেয়ার্ড নামযুক্ত টাইমলাইন

সিনক্রোনাইজেশনের জন্য প্রক্রিয়াটিতে তিনটি নতুন সিএসএস প্রপার্টি জড়িত:

1. `timeline-scope`: একটি কন্টেইনার উপাদানে প্রয়োগ করা হয়। এটি একটি স্কোপ স্থাপন করে যেখানে এর মধ্যে সংজ্ঞায়িত নামযুক্ত টাইমলাইনগুলি অন্যান্য উপাদান দ্বারা খুঁজে পাওয়া যায়।
2. `scroll-timeline-name` / `view-timeline-name`: একটি টাইমলাইন তৈরি এবং নাম দেওয়ার জন্য একটি উপাদানে প্রয়োগ করা হয়। নামটি অবশ্যই একটি ড্যাশড-আইডেন্ট (যেমন, `--my-timeline`) হতে হবে। এই উপাদানটির স্ক্রোল অগ্রগতি (`scroll-timeline-name`) বা দৃশ্যমানতা (`view-timeline-name`) নামযুক্ত টাইমলাইনের উৎস হয়ে ওঠে।
3. `animation-timeline`: আমরা এটি আগে দেখেছি, কিন্তু এখন, `scroll()` বা `view()` ব্যবহার করার পরিবর্তে, আমরা এটিকে আমাদের শেয়ার্ড টাইমলাইনের ড্যাশড-আইডেন্ট নামটি পাস করি (যেমন, `animation-timeline: --my-timeline;`)।

প্রক্রিয়াটি নিম্নরূপ: 1. একটি পূর্বপুরুষ উপাদান একটি `timeline-scope` সংজ্ঞায়িত করে। 2. একটি বংশধর উপাদান `view-timeline-name` বা `scroll-timeline-name` ব্যবহার করে একটি টাইমলাইন সংজ্ঞায়িত করে এবং নাম দেয়। 3. অন্য যেকোনো বংশধর উপাদান তখন তার `animation-timeline` প্রপার্টিতে সেই নামটি ব্যবহার করে একই টাইমলাইনে হুক করতে পারে।

ব্যবহারিক উদাহরণ: একটি মাল্টি-লেয়ার্ড প্যারালাক্স সিন

আসুন একটি ক্লাসিক প্যারালাক্স হেডার তৈরি করি যেখানে একটি ব্যাকগ্রাউন্ড ইমেজ পৃষ্ঠার চেয়ে ধীরে স্ক্রোল করে এবং একটি শিরোনাম দ্রুত ফেড আউট হয়ে যায়।

HTML কাঠামো:

            <div class="parallax-container">
  <div class="parallax-background"></div>
  <h1 class="parallax-title">Synchronized Motion</h1>
</div>
<div class="content">
  <p>... main page content ...</p>
</div>
            

              
                Copy
              
            
          

CSS প্রয়োগ:

            /* 1. Define a scope for our named timeline */
.parallax-container {
  timeline-scope: --parallax-scene;
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 2. Define the timeline itself using the container's visibility */
/* The container's journey through the viewport will drive the animations */
.parallax-container {
  view-timeline-name: --parallax-scene;
}

/* 3. Define the keyframes for each layer */
@keyframes move-background {
  to {
    transform: translateY(30vh); /* Moves slower */
  }
}

@keyframes fade-title {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* 4. Style the layers and hook them to the named timeline */
.parallax-background {
  position: absolute;
  inset: -30vh 0 0 0; /* Extra height to allow for movement */
  background: url('https://picsum.photos/1600/1200') no-repeat center center/cover;
  z-index: -1;

  /* Attach to the shared timeline */
  animation: move-background linear;
  animation-timeline: --parallax-scene;
}

.parallax-title {
  color: white;
  font-size: 5rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);

  /* Attach to the same shared timeline */
  animation: fade-title linear;
  animation-timeline: --parallax-scene;
}

            

              
                Copy
              
            
          

ব্যাখ্যা:

1. `.parallax-container` একটি `timeline-scope` স্থাপন করে যার নাম `--parallax-scene`। এটি নামটি তার চাইল্ড উপাদানগুলির জন্য উপলব্ধ করে।
2. আমরা তারপর একই উপাদানে `view-timeline-name: --parallax-scene;` যোগ করি। এর মানে হলো `--parallax-scene` নামের টাইমলাইনটি `.parallax-container`-এর দৃশ্যমানতার উপর ভিত্তি করে একটি `view()` টাইমলাইন হবে।
3. আমরা দুটি ভিন্ন অ্যানিমেশন তৈরি করি: একটি সূক্ষ্ম উল্লম্ব শিফটের জন্য `move-background` এবং একটি ফেড-এবং-স্কেল ইফেক্টের জন্য `fade-title`।
4. গুরুত্বপূর্ণভাবে, `.parallax-background` এবং `.parallax-title` উভয়েরই `animation-timeline` প্রপার্টি `--parallax-scene`-এ সেট করা আছে।

এখন, যখন `.parallax-container` ভিউপোর্টের মধ্যে দিয়ে স্ক্রোল করে, তখন এটি একটি একক অগ্রগতির মান তৈরি করে। ব্যাকগ্রাউন্ড এবং শিরোনাম উভয়ই তাদের নিজ নিজ অ্যানিমেশন চালাতে এই একই মান ব্যবহার করে। যদিও তাদের কীফ্রেমগুলি সম্পূর্ণ ভিন্ন, তাদের প্লেব্যাক পুরোপুরি সিনক্রোনাইজড, যা একটি সুসংহত এবং চিত্তাকর্ষক ভিজ্যুয়াল ইফেক্ট তৈরি করে।

`animation-range` দিয়ে উন্নত সিনক্রোনাইজেশন

নামযুক্ত টাইমলাইনগুলি অ্যানিমেশনগুলিকে একসাথে প্লে করার জন্য অসাধারণ। কিন্তু যদি আপনি চান যে সেগুলি ক্রমানুসারে প্লে হোক বা একটি অ্যানিমেশন অন্য উপাদানের দৃশ্যমানতার একটি নির্দিষ্ট অংশের সময় ট্রিগার হোক? এখানেই `animation-range` প্রপার্টি ফ্যামিলি আরও একটি শক্তিশালী নিয়ন্ত্রণের স্তর প্রদান করে।

০% থেকে ১০০% এর বাইরে

ডিফল্টরূপে, একটি অ্যানিমেশন তার টাইমলাইনের পুরো সময়কালের সাথে ম্যাপ করা হয়। `animation-range` আপনাকে টাইমলাইনের নির্দিষ্ট শুরু এবং শেষ বিন্দু সংজ্ঞায়িত করতে দেয় যা আপনার অ্যানিমেশনের কীফ্রেমের ০% এবং ১০০% বিন্দুর সাথে মিলে যাবে।

এটি আপনাকে এমন কিছু বলতে দেয়, "এই অ্যানিমেশনটি শুরু করো যখন উপাদানটি স্ক্রিনের ২০% প্রবেশ করে, এবং এটি ৫০% চিহ্নে পৌঁছানোর মধ্যে শেষ করো।"

`animation-range` মান বোঝা

সিনট্যাক্সটি হলো `animation-range-start` এবং `animation-range-end`, অথবা শর্টহ্যান্ড `animation-range`।

animation-range: <start-range> <end-range>;

মানগুলি বিশেষ কীওয়ার্ড এবং শতাংশের সংমিশ্রণ হতে পারে। একটি `view()` টাইমলাইনের জন্য, সবচেয়ে সাধারণ কীওয়ার্ডগুলি হলো:

• entry: যে মুহূর্তে উপাদানটির বর্ডার বক্স স্ক্রোলপোর্টের শেষ প্রান্ত অতিক্রম করে।
• exit: যে মুহূর্তে উপাদানটির বর্ডার বক্স স্ক্রোলপোর্টের শুরুর প্রান্ত অতিক্রম করে।
• cover: উপাদানটি স্ক্রোলপোর্টকে কভার করার পুরো সময়কাল, যে মুহূর্তে এটি পুরোপুরি কভার করে থেকে যে মুহূর্তে এটি বন্ধ করে।
• contain: সেই সময়কাল যখন উপাদানটি পুরোপুরি স্ক্রোলপোর্টের মধ্যে থাকে।

আপনি এগুলিতে শতাংশ অফসেটও যোগ করতে পারেন, যেমন `entry 0%` (ডিফল্ট শুরু), `entry 100%` (যখন উপাদানটির নিচের প্রান্ত ভিউপোর্টের নিচের প্রান্তের সাথে মিলিত হয়), `exit 0%` এবং `exit 100%`।

ব্যবহারিক উদাহরণ: একটি ক্রমানুসারে গল্প বলার দৃশ্য

আসুন একটি বৈশিষ্ট্য তালিকা তৈরি করি যেখানে প্রতিটি আইটেম আপনি স্ক্রোল করার সাথে সাথে হাইলাইট হয়, নিখুঁত সমন্বয়ের জন্য একটি একক শেয়ার্ড টাইমলাইন ব্যবহার করে।

HTML কাঠামো:

            <div class="feature-list-container">
  <div class="feature-list-timeline-marker"></div>
  <div class="feature-item">
    <h3>Feature One: Global Reach</h3>
    <p>Our services are available worldwide.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Two: Unbeatable Speed</h3>
    <p>Experience next-generation performance.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Three: Ironclad Security</h3>
    <p>Your data is always protected.</p>
  </div>
</div>
            

              
                Copy
              
            
          

CSS প্রয়োগ:

            /* Define the scope on the main container */
.feature-list-container {
  timeline-scope: --feature-list;
  position: relative;
  padding: 50vh 0; /* Give space for scrolling */
}

/* Use a dedicated empty div to define the timeline's source */
.feature-list-timeline-marker {
  view-timeline-name: --feature-list;
  position: absolute;
  inset: 0;
}

/* Keyframes for highlighting an item */
@keyframes highlight-feature {
  to { 
    background-color: lightgoldenrodyellow;
    transform: scale(1.02);
  }
}

.feature-item {
  width: 80%;
  margin: 5rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;

  /* Attach animation and the shared timeline */
  animation: highlight-feature linear both;
  animation-timeline: --feature-list;
}

/* The magic of animation-range for sequencing */
.feature-item:nth-of-type(1) {
  animation-range: entry 5% entry 40%;
}

.feature-item:nth-of-type(2) {
  animation-range: entry 35% entry 70%;
}

.feature-item:nth-of-type(3) {
  animation-range: entry 65% entry 100%;
}

            

              
                Copy
              
            
          

ব্যাখ্যা:

1. আমরা একটি `--feature-list` স্কোপ স্থাপন করি এবং পুরো কন্টেইনার জুড়ে থাকা একটি খালি মার্কার ডিভের সাথে বাঁধা একটি নামযুক্ত `view()` টাইমলাইন তৈরি করি। এই একক টাইমলাইনটি পুরো বৈশিষ্ট্য বিভাগের দৃশ্যমানতা ট্র্যাক করে।
2. প্রতিটি `.feature-item` এই একই `--feature-list` টাইমলাইনের সাথে লিঙ্ক করা হয় এবং একই `highlight-feature` অ্যানিমেশন দেওয়া হয়।
3. গুরুত্বপূর্ণ অংশটি হলো `animation-range`। এটি ছাড়া, কন্টেইনারটি ভিউতে স্ক্রোল করার সাথে সাথে তিনটি আইটেমই একসাথে হাইলাইট হতো।
4. পরিবর্তে, আমরা বিভিন্ন রেঞ্জ নির্ধারণ করি:
   • প্রথম আইটেমটি টাইমলাইনের অগ্রগতির ৫% এবং ৪০% এর মধ্যে অ্যানিমেট করে।
   • দ্বিতীয় আইটেমটি ৩৫% থেকে ৭০% উইন্ডোর সময় অ্যানিমেট করে।
   • তৃতীয়টি ৬৫% থেকে ১০০% পর্যন্ত অ্যানিমেট করে।

এটি একটি মনোরম ক্রমানুসারে ইফেক্ট তৈরি করে। আপনি স্ক্রোল করার সাথে সাথে প্রথম বৈশিষ্ট্যটি হাইলাইট হয়। আপনি স্ক্রোল চালিয়ে যাওয়ার সাথে সাথে এটি ম্লান হয়ে যায় যখন দ্বিতীয়টি হাইলাইট হয়, এবং এভাবেই চলতে থাকে। ওভারল্যাপিং রেঞ্জগুলি (`entry 40%` এবং `entry 35%`) একটি মসৃণ হস্তান্তর তৈরি করে। এই উন্নত সিকোয়েন্সিং এবং সিনক্রোনাইজেশন মাত্র কয়েক লাইন ডিক্লেয়ারেটিভ সিএসএস দিয়ে অর্জন করা হয়।

পারফরম্যান্স এবং সেরা অনুশীলন

যদিও সিএসএস স্ক্রোল-ড্রিভেন অ্যানিমেশনগুলি অবিশ্বাস্যভাবে শক্তিশালী, তবে এগুলি দায়িত্বের সাথে ব্যবহার করা গুরুত্বপূর্ণ। বিশ্বব্যাপী দর্শকদের জন্য এখানে কিছু মূল সেরা অনুশীলন রয়েছে।

পারফরম্যান্সের সুবিধা

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

অ্যাক্সেসিবিলিটি বিবেচনা

সবাই ওয়েব পেজে গতি চায় না বা সহ্য করতে পারে না। ব্যবহারকারীর পছন্দকে সম্মান করা অত্যন্ত গুরুত্বপূর্ণ। `prefers-reduced-motion` মিডিয়া কোয়েরি ব্যবহার করে সেইসব ব্যবহারকারীদের জন্য আপনার অ্যানিমেশনগুলি নিষ্ক্রিয় বা হ্রাস করুন যাদের অপারেটিং সিস্টেমে এই সেটিংটি সক্রিয় করা আছে।

            @media (prefers-reduced-motion: reduce) {
  .card,
  .parallax-background,
  .parallax-title,
  .feature-item {
    /* Disable the animations */
    animation: none;
    /* Ensure elements are in their final, visible state */
    opacity: 1;
    transform: none;
  }
}

            

              
                Copy
              
            
          

ব্রাউজার সাপোর্ট এবং ফলব্যাক

২০২৩ সালের শেষের দিকে, সিএসএস স্ক্রোল-ড্রিভেন অ্যানিমেশনগুলি ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলিতে (ক্রোম, এজ) সমর্থিত এবং ফায়ারফক্স এবং সাফারিতে সক্রিয় বিকাশের অধীনে রয়েছে। বিশ্বব্যাপী দর্শকদের জন্য, আপনাকে অবশ্যই সেই ব্রাউজারগুলি বিবেচনা করতে হবে যা এখনও এই বৈশিষ্ট্যটি সমর্থন করে না। `@supports` অ্যাট-রুল ব্যবহার করে অ্যানিমেশনগুলি কেবল সেখানেই প্রয়োগ করুন যেখানে সেগুলি সমর্থিত।

            /* Default state for non-supporting browsers */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Apply animations only in supporting browsers */
@supports (animation-timeline: view()) {
  .card {
    opacity: 0; /* Initial state for animation */
    transform: translateY(50px);
    animation: fade-in-up linear;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

এই প্রগ্রেসিভ এনহ্যান্সমেন্ট পদ্ধতিটি সমস্ত ব্যবহারকারীর জন্য একটি কার্যকরী অভিজ্ঞতা নিশ্চিত করে, এবং আধুনিক ব্রাউজার ব্যবহারকারীদের জন্য একটি উন্নত, অ্যানিমেটেড অভিজ্ঞতা প্রদান করে।

ডিবাগিং টিপস

আধুনিক ব্রাউজার ডেভেলপার টুলগুলি স্ক্রোল-ড্রিভেন অ্যানিমেশন ডিবাগ করার জন্য সমর্থন যোগ করছে। উদাহরণস্বরূপ, ক্রোম ডেভটুলসে, আপনি একটি উপাদান পরিদর্শন করতে পারেন এবং "অ্যানিমেশন" প্যানেলে একটি নতুন বিভাগ খুঁজে পেতে পারেন যা আপনাকে টাইমলাইনের অগ্রগতি দেখতে এবং ম্যানুয়ালি এর মধ্যে দিয়ে স্ক্রাব করতে দেয়, যা আপনার `animation-range` মানগুলি সূক্ষ্মভাবে টিউন করা অনেক সহজ করে তোলে।

উপসংহার: ভবিষ্যৎ হলো স্ক্রোল-ড্রিভেন

সিএসএস স্ক্রোল-ড্রিভেন অ্যানিমেশন, এবং বিশেষ করে নামযুক্ত টাইমলাইনের মাধ্যমে সেগুলিকে সিনক্রোনাইজ করার ক্ষমতা, ওয়েব ডিজাইন এবং ডেভেলপমেন্টের জন্য একটি বিশাল অগ্রগতি। আমরা ইম্পারেটিভ, প্রায়শই ভঙ্গুর জাভাস্ক্রিপ্ট সমাধান থেকে একটি ডিক্লেয়ারেটিভ, পারফরম্যান্ট এবং অ্যাক্সেসিবল সিএসএস-নেটিভ পদ্ধতিতে চলে এসেছি।

আমরা `scroll()` এবং `view()` টাইমলাইনের মৌলিক ধারণাগুলি অন্বেষণ করেছি, যা যথাক্রমে পৃষ্ঠা-স্তর এবং উপাদান-স্তরের অগ্রগতি পরিচালনা করে। আরও গুরুত্বপূর্ণভাবে, আমরা `timeline-scope` এবং `view-timeline-name` দিয়ে শেয়ার্ড, নামযুক্ত টাইমলাইন তৈরি করে সিনক্রোনাইজেশনের শক্তি আনলক করেছি। এটি আমাদের প্যারালাক্স সিনের মতো জটিল, সমন্বিত ভিজ্যুয়াল আখ্যান তৈরি করতে দেয়। অবশেষে, `animation-range` দিয়ে, আমরা অ্যানিমেশনগুলিকে সিকোয়েন্স করতে এবং জটিল, ওভারল্যাপিং ইন্টারঅ্যাকশন তৈরি করতে সূক্ষ্ম নিয়ন্ত্রণ অর্জন করেছি।

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