স্ক্রোল-চালিত অ্যানিমেশনগুলির সাথে স্ক্রলে উপাদানগুলিকে অ্যানিমেট করুন

ঘোষণামূলক উপায়ে স্ক্রোল-চালিত অ্যানিমেশন তৈরি করতে স্ক্রোল টাইমলাইন এবং ভিউ টাইমলাইনের সাথে কীভাবে কাজ করবেন তা শিখুন।

Bramus

প্রকাশিত: ৫ মে, ২০২৩

স্ক্রোল-চালিত অ্যানিমেশন

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

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

এই ধরণের প্রভাব অর্জনের সর্বোত্তম উপায় হল main thread এ স্ক্রোল ইভেন্টগুলিতে সাড়া দেওয়া, যা দুটি প্রধান সমস্যার দিকে পরিচালিত করে:

• আধুনিক ব্রাউজারগুলি একটি পৃথক প্রক্রিয়ায় স্ক্রোলিং করে এবং তাই অ্যাসিঙ্ক্রোনাসভাবে স্ক্রোল ইভেন্টগুলি সরবরাহ করে।
• প্রধান থ্রেড অ্যানিমেশনগুলি jank এর অধীনে ।

এর ফলে স্ক্রোলিংয়ের সাথে সামঞ্জস্যপূর্ণ পারফর্ম্যান্স স্ক্রোল-চালিত অ্যানিমেশন তৈরি করা অসম্ভব বা খুব কঠিন হয়ে পড়ে।

ক্রোম সংস্করণ ১১৫ থেকে নতুন API এবং ধারণাগুলির একটি সেট রয়েছে যা আপনি ঘোষণামূলক স্ক্রোল-চালিত অ্যানিমেশন সক্ষম করতে ব্যবহার করতে পারেন: স্ক্রোল টাইমলাইন এবং ভিউ টাইমলাইন।

এই নতুন ধারণাগুলি বিদ্যমান ওয়েব অ্যানিমেশন API (WAAPI) এবং CSS অ্যানিমেশন API-এর সাথে একীভূত হয়, যার ফলে তারা বিদ্যমান API-এর সুবিধাগুলি উত্তরাধিকার সূত্রে পেতে পারে। এর মধ্যে রয়েছে স্ক্রোল-চালিত অ্যানিমেশনগুলি মূল থ্রেড থেকে চালানোর ক্ষমতা। হ্যাঁ, সঠিকভাবে পড়ুন: আপনি এখন স্ক্রোল দ্বারা চালিত, মূল থ্রেড থেকে চালানোর জন্য সিল্কি মসৃণ অ্যানিমেশনগুলি পেতে পারেন, মাত্র কয়েকটি লাইন অতিরিক্ত কোড দিয়ে। কী পছন্দ নয়?!

ওয়েবে অ্যানিমেশন, একটি ছোট সংক্ষিপ্তসার

CSS সহ ওয়েবে অ্যানিমেশন

CSS-এ একটি অ্যানিমেশন তৈরি করতে, @keyframes at-rule ব্যবহার করে কীফ্রেমের একটি সেট নির্ধারণ করুন। animation-name প্রোপার্টি ব্যবহার করে এটিকে একটি এলিমেন্টের সাথে লিঙ্ক করুন এবং অ্যানিমেশনটি কত সময় নেবে তা নির্ধারণ করার জন্য একটি animation-duration সেট করুন। আরও animation-* লংহ্যান্ড প্রোপার্টি উপলব্ধ রয়েছে animation-easing-function এবং animation-fill-mode - কয়েকটি নাম বলার জন্য - যা animation শর্টহ্যান্ডে একত্রিত করা যেতে পারে।

উদাহরণস্বরূপ, এখানে একটি অ্যানিমেশন রয়েছে যা X-অক্ষের উপর একটি উপাদানকে স্কেল করে এবং একই সাথে এর পটভূমির রঙও পরিবর্তন করে:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

জাভাস্ক্রিপ্ট সহ ওয়েবে অ্যানিমেশন

জাভাস্ক্রিপ্টে, ওয়েব অ্যানিমেশন API ব্যবহার করে ঠিক একই কাজ করা যেতে পারে। আপনি নতুন Animation এবং KeyFrameEffect ইনস্ট্যান্স তৈরি করে অথবা অনেক ছোট Element animate() পদ্ধতি ব্যবহার করে এটি করতে পারেন।

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

উপরের জাভাস্ক্রিপ্ট স্নিপেটের এই ভিজ্যুয়াল ফলাফলটি পূর্ববর্তী CSS সংস্করণের মতোই।

অ্যানিমেশন টাইমলাইন

ডিফল্টরূপে, একটি উপাদানের সাথে সংযুক্ত একটি অ্যানিমেশন ডকুমেন্ট টাইমলাইনে চলে। পৃষ্ঠা লোড হওয়ার সময় এর উৎপত্তি সময় 0 থেকে শুরু হয় এবং ঘড়ির সময় এগিয়ে যাওয়ার সাথে সাথে সামনের দিকে টিক টিক করতে শুরু করে। এটি ডিফল্ট অ্যানিমেশন টাইমলাইন এবং এখন পর্যন্ত, এটিই একমাত্র অ্যানিমেশন টাইমলাইন যা আপনার অ্যাক্সেস ছিল।

স্ক্রোল-চালিত অ্যানিমেশন স্পেসিফিকেশন দুটি নতুন ধরণের টাইমলাইন সংজ্ঞায়িত করে যা আপনি ব্যবহার করতে পারেন:

• স্ক্রোল প্রগ্রেস টাইমলাইন : একটি টাইমলাইন যা একটি নির্দিষ্ট অক্ষ বরাবর একটি স্ক্রোল কন্টেইনারের স্ক্রোল অবস্থানের সাথে সংযুক্ত থাকে।
• ভিউ প্রোগ্রেস টাইমলাইন : একটি টাইমলাইন যা তার স্ক্রোল কন্টেইনারের মধ্যে একটি নির্দিষ্ট উপাদানের আপেক্ষিক অবস্থানের সাথে সংযুক্ত থাকে।

স্ক্রোল অগ্রগতির সময়রেখা

স্ক্রোল প্রগ্রেস টাইমলাইন হল একটি অ্যানিমেশন টাইমলাইন যা একটি নির্দিষ্ট অক্ষ বরাবর একটি স্ক্রোল কন্টেইনারের স্ক্রোল অবস্থানের অগ্রগতির সাথে যুক্ত থাকে - যাকে স্ক্রোলপোর্ট বা স্ক্রোলারও বলা হয়। এটি একটি স্ক্রোল রেঞ্জের একটি অবস্থানকে অগ্রগতির শতাংশে রূপান্তর করে।

শুরুর স্ক্রোল পজিশন ০% অগ্রগতি এবং শেষের স্ক্রোল পজিশন ১০০% অগ্রগতি নির্দেশ করে। নিচের ভিজুয়ালাইজেশনে, আপনি দেখতে পাবেন যে স্ক্রোলারটি উপর থেকে নীচে স্ক্রোল করার সময় অগ্রগতি ০% থেকে ১০০% পর্যন্ত বেড়ে যায়।

✨ নিজে চেষ্টা করে দেখুন

একটি স্ক্রোল প্রগ্রেস টাইমলাইনকে প্রায়শই কেবল "স্ক্রল টাইমলাইন" হিসাবে সংক্ষেপে বলা হয়।

অগ্রগতির সময়রেখা দেখুন

এই ধরণের টাইমলাইন একটি স্ক্রোল কন্টেইনারের মধ্যে একটি নির্দিষ্ট উপাদানের আপেক্ষিক অগ্রগতির সাথে যুক্ত। ঠিক একটি স্ক্রোল প্রগ্রেস টাইমলাইনের মতো, একজন স্ক্রোলারের স্ক্রোল অফসেট ট্র্যাক করা হয়। একটি স্ক্রোল প্রগ্রেস টাইমলাইনের বিপরীতে, এটি সেই স্ক্রোলারের মধ্যে একটি বিষয়ের আপেক্ষিক অবস্থান যা অগ্রগতি নির্ধারণ করে।

এটি কিছুটা IntersectionObserver এর সাথে তুলনীয়, যা স্ক্রোলারে একটি উপাদান কতটা দৃশ্যমান তা ট্র্যাক করতে পারে। যদি স্ক্রোলারে উপাদানটি দৃশ্যমান না হয়, তবে এটি ছেদকারী নয়। যদি এটি স্ক্রোলারের ভিতরে দৃশ্যমান হয় - এমনকি ক্ষুদ্রতম অংশের জন্যও - এটি ছেদকারী।

একটি ভিউ প্রোগ্রেস টাইমলাইন শুরু হয় যখন কোনও সাবজেক্ট স্ক্রলারের সাথে ছেদ করতে শুরু করে এবং যখন সাবজেক্ট স্ক্রলারকে ছেদ করা বন্ধ করে দেয় তখন শেষ হয়। নিম্নলিখিত ভিজ্যুয়ালাইজেশনে, আপনি দেখতে পাবেন যে সাবজেক্ট যখন স্ক্রোল কন্টেইনারে প্রবেশ করে তখন অগ্রগতি 0% থেকে গণনা শুরু হয় এবং সাবজেক্ট যখন স্ক্রোল কন্টেইনার থেকে বেরিয়ে আসে ঠিক তখনই 100% এ পৌঁছায়।

✨ নিজে চেষ্টা করে দেখুন

একটি ভিউ প্রোগ্রেস টাইমলাইনকে প্রায়শই কেবল "ভিউ টাইমলাইন" হিসাবে সংক্ষেপে বলা হয়। বিষয়ের আকারের উপর ভিত্তি করে ভিউ টাইমলাইনের নির্দিষ্ট অংশগুলিকে লক্ষ্য করা সম্ভব, তবে পরে আরও বিস্তারিত আলোচনা করা হবে।

স্ক্রোল প্রগ্রেস টাইমলাইন ব্যবহার করে ব্যবহারিক হওয়া

CSS-এ একটি বেনামী স্ক্রোল প্রগতির সময়রেখা তৈরি করা

CSS-এ একটি Scroll Timeline তৈরি করার সবচেয়ে সহজ উপায় হল scroll() ফাংশন ব্যবহার করা। এটি একটি বেনামী Scroll Timeline তৈরি করে যা আপনি নতুন animation-timeline প্রোপার্টির জন্য মান হিসেবে সেট করতে পারেন।

উদাহরণ:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

scroll() ফাংশনটি একটি <scroller> এবং একটি <axis> আর্গুমেন্ট গ্রহণ করে।

<scroller> আর্গুমেন্টের জন্য গৃহীত মানগুলি নিম্নরূপ:

• nearest : নিকটতম পূর্বপুরুষ স্ক্রোল কন্টেইনার ব্যবহার করে (ডিফল্ট) ।
• root : ডকুমেন্ট ভিউপোর্টকে স্ক্রোল কন্টেইনার হিসেবে ব্যবহার করে।
• self : এলিমেন্টটিকেই স্ক্রোল কন্টেইনার হিসেবে ব্যবহার করে।

<axis> আর্গুমেন্টের জন্য গৃহীত মানগুলি নিম্নরূপ:

• block : স্ক্রোল কন্টেইনারের ব্লক অক্ষ বরাবর অগ্রগতির পরিমাপ ব্যবহার করে (ডিফল্ট) ।
• inline : স্ক্রোল কন্টেইনারের ইনলাইন অক্ষ বরাবর অগ্রগতির পরিমাপ ব্যবহার করে।
• y : স্ক্রোল কন্টেইনারের y অক্ষ বরাবর অগ্রগতির পরিমাপ ব্যবহার করে।
• x : স্ক্রোল কন্টেইনারের x অক্ষ বরাবর অগ্রগতির পরিমাপ ব্যবহার করে।

উদাহরণস্বরূপ, ব্লক অক্ষের রুট স্ক্রোলারের সাথে একটি অ্যানিমেশন বাঁধতে, scroll() এ পাস করার জন্য মানগুলি হল root এবং block । একসাথে রাখলে, মানটি হল scroll(root block) ।

ডেমো: পঠনের অগ্রগতি নির্দেশক

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

✨ নিজে চেষ্টা করে দেখুন

পজিশন ফিক্সড ব্যবহার করে পঠন অগ্রগতি নির্দেশকটি পৃষ্ঠার শীর্ষে অবস্থিত। কম্পোজিট অ্যানিমেশনগুলিকে কাজে লাগানোর জন্য, width অ্যানিমেশন করা হচ্ছে না বরং একটি transform ব্যবহার করে x-অক্ষের উপর উপাদানটিকে ছোট করা হচ্ছে।

<body>
  <div id="progress"></div>
  …
</body>

@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();
}

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

ট্র্যাক করার জন্য ডিফল্ট স্ক্রোলারটি nearest , এবং ডিফল্ট অক্ষ হল block । এটি কার্যকরভাবে রুট স্ক্রোলারকে লক্ষ্য করে কারণ এটি #progress উপাদানের সবচেয়ে কাছের স্ক্রোলার, এবং এর ব্লকের দিকটি ট্র্যাক করে।

CSS-এ একটি নামযুক্ত স্ক্রোল প্রগতি টাইমলাইন তৈরি করা হচ্ছে

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

একটি এলিমেন্টে একটি নামযুক্ত Scroll Progress Timeline তৈরি করতে, scroll কন্টেইনারে scroll-timeline-name CSS প্রোপার্টিটি আপনার পছন্দের একটি শনাক্তকারীতে সেট করুন। মানটি -- দিয়ে শুরু হতে হবে।

কোন অক্ষটি ট্র্যাক করতে হবে তা পরিবর্তন করতে, scroll-timeline-axis বৈশিষ্ট্যটিও ঘোষণা করুন। অনুমোদিত মানগুলি scroll() এর <axis> আর্গুমেন্টের মতোই।

অবশেষে, অ্যানিমেশনটিকে Scroll Progress Timeline-এর সাথে লিঙ্ক করতে, যে উপাদানটিকে অ্যানিমেশন করতে হবে তার উপর animation-timeline বৈশিষ্ট্যটি scroll-timeline-name জন্য ব্যবহৃত শনাক্তকারীর মতো একই মানের সেট করুন।

কোড উদাহরণ:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

যদি ইচ্ছা হয়, আপনি scroll-timeline-name এবং scroll-timeline-axis scroll-timeline শর্টহ্যান্ডে একত্রিত করতে পারেন। উদাহরণস্বরূপ:

scroll-timeline: --my-scroller inline;

ডেমো: অনুভূমিক ক্যারোজেল ধাপ নির্দেশক

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

✨ নিজে চেষ্টা করে দেখুন

একটি গ্যালারির বেস মার্কআপ হল:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

.gallery__progress উপাদানটি সম্পূর্ণরূপে .gallery wrapper উপাদানের মধ্যেই অবস্থিত। এর প্রাথমিক আকার --num-images কাস্টম বৈশিষ্ট্য দ্বারা নির্ধারিত হয়।

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

.gallery__scrollcontainer অন্তর্ভুক্ত .gallery__entry উপাদানগুলিকে অনুভূমিকভাবে সাজিয়ে রাখে এবং এটিই স্ক্রোল করার উপাদান। এর স্ক্রোল অবস্থান ট্র্যাক করার মাধ্যমে, .gallery__progress অ্যানিমেটেড হয়ে যায়। এটি Scroll Progress Timeline --gallery__scrollcontainer নামক উল্লেখ করে করা হয়।

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

জাভাস্ক্রিপ্ট ব্যবহার করে একটি স্ক্রোল প্রগ্রেস টাইমলাইন তৈরি করা

জাভাস্ক্রিপ্টে একটি স্ক্রোল টাইমলাইন তৈরি করতে, ScrollTimeline ক্লাসের একটি নতুন উদাহরণ তৈরি করুন। আপনি যে source এবং axis ট্র্যাক করতে চান তা সহ একটি প্রপার্টি ব্যাগে পাস করুন।

• source : যে উপাদানটির স্ক্রোলার আপনি ট্র্যাক করতে চান তার একটি রেফারেন্স। রুট স্ক্রোলারকে লক্ষ্য করতে document.documentElement ব্যবহার করুন।
• axis : কোন অক্ষটি ট্র্যাক করতে হবে তা নির্ধারণ করে। CSS ভেরিয়েন্টের মতো, গৃহীত মানগুলি হল block , inline , x , এবং y ।

const tl = new ScrollTimeline({
  source: document.documentElement,
});

এটি একটি ওয়েব অ্যানিমেশনের সাথে সংযুক্ত করতে, এটিকে timeline প্রপার্টি হিসেবে দিন এবং যদি কোনও duration থাকে তবে তা বাদ দিন।

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

ডেমো: পঠন অগ্রগতি নির্দেশক, পুনরায় দেখা হয়েছে

জাভাস্ক্রিপ্ট দিয়ে পড়ার অগ্রগতি নির্দেশক পুনরায় তৈরি করতে, একই মার্কআপ ব্যবহার করার সময়, নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি ব্যবহার করুন:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

সিএসএস সংস্করণে ভিজ্যুয়াল ফলাফল একই রকম: তৈরি timeline রুট স্ক্রোলার ট্র্যাক করে এবং পৃষ্ঠাটি স্ক্রোল করার সাথে সাথে x-অক্ষে #progress 0% থেকে 100% পর্যন্ত স্কেল করে।

✨ নিজে চেষ্টা করে দেখুন

ভিউ প্রোগ্রেস টাইমলাইন ব্যবহার করে ব্যবহারিক হওয়া

CSS-এ একটি বেনামী ভিউ প্রোগ্রেস টাইমলাইন তৈরি করা

একটি ভিউ প্রোগ্রেস টাইমলাইন তৈরি করতে, view() ফাংশনটি ব্যবহার করুন। এর গৃহীত আর্গুমেন্টগুলি হল <axis> এবং <view-timeline-inset> ।

• <axis> স্ক্রোল প্রগতি টাইমলাইনের মতোই এবং কোন অক্ষটি ট্র্যাক করতে হবে তা নির্ধারণ করে। ডিফল্ট মান হল block ।
• <view-timeline-inset> ব্যবহার করে, আপনি একটি অফসেট (ধনাত্মক বা ঋণাত্মক) নির্দিষ্ট করতে পারেন যাতে কোনও উপাদান দৃশ্যমান বা না থাকা অবস্থায় সীমানা সামঞ্জস্য করা যায়। মানটি অবশ্যই একটি শতাংশ বা auto হতে হবে, auto ডিফল্ট মান হবে।

উদাহরণস্বরূপ, ব্লক অক্ষে স্ক্রোলারের সাথে ছেদকারী একটি উপাদানের সাথে একটি অ্যানিমেশন বাঁধতে, view(block) ব্যবহার করুন। scroll() এর মতো, এটিকে animation-timeline বৈশিষ্ট্যের জন্য মান হিসাবে সেট করুন এবং animation-duration কে auto এ সেট করতে ভুলবেন না।

নিচের কোডটি ব্যবহার করে, স্ক্রোল করার সময় ভিউপোর্ট অতিক্রম করার সাথে সাথে প্রতিটি img ফেইড-ইন হয়ে যাবে।

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

মধ্যবর্তী: টাইমলাইন রেঞ্জ দেখুন

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

ভিউ টাইমলাইনের একটি নির্দিষ্ট অংশের সাথে এটি সংযুক্ত করার জন্য এটির পরিসর নির্দিষ্ট করে লিঙ্ক করাও সম্ভব। উদাহরণস্বরূপ, এটি কেবল তখনই হতে পারে যখন বিষয় স্ক্রোলারে প্রবেশ করছে। নিম্নলিখিত ভিজ্যুয়ালাইজেশনে, বিষয় স্ক্রোল কন্টেইনারে প্রবেশ করার সময় অগ্রগতি 0% থেকে গণনা শুরু হয় তবে এটি সম্পূর্ণরূপে ছেদ করার মুহূর্ত থেকে ইতিমধ্যে 100% এ পৌঁছে যায়।

আপনি যে সম্ভাব্য ভিউ টাইমলাইন রেঞ্জগুলিকে লক্ষ্য করতে পারেন তা হল:

• cover : ভিউ প্রোগ্রেস টাইমলাইনের সম্পূর্ণ পরিসর উপস্থাপন করে।
• entry : মূল বাক্সটি যে পরিসরের মধ্যে ভিউ প্রোগ্রেস ভিজিবিলিটি রেঞ্জে প্রবেশ করছে তা প্রতিনিধিত্ব করে।
• exit : প্রিন্সিপাল বক্সটি ভিউ প্রোগ্রেস ভিজিবিলিটি রেঞ্জ থেকে যে পরিসর থেকে বেরিয়ে আসছে তার পরিসর নির্দেশ করে।
• entry-crossing : মূল বাক্সটি শেষ সীমানা প্রান্ত অতিক্রম করার সময় যে পরিসরটি অতিক্রম করে তা নির্দেশ করে।
• exit-crossing : মূল বাক্সটি যে পরিসরের মধ্যে শুরুর সীমানা অতিক্রম করে তা নির্দেশ করে।
• contain : স্ক্রোলপোর্টের মধ্যে মূল বাক্সটি সম্পূর্ণরূপে ধারণ করে, অথবা সম্পূর্ণরূপে কভার করে, সেই পরিসরকে প্রতিনিধিত্ব করে। এটি নির্ভর করে বিষয় স্ক্রোলারের চেয়ে লম্বা নাকি ছোট তার উপর।

একটি পরিসর নির্ধারণ করতে, আপনাকে একটি পরিসর-শুরু এবং পরিসর-শেষ সেট করতে হবে। প্রতিটিতে পরিসর-নাম (উপরের তালিকা দেখুন) এবং সেই পরিসর-নামের মধ্যে অবস্থান নির্ধারণের জন্য একটি পরিসর-অফসেট থাকে। পরিসর-অফসেট সাধারণত 0% থেকে 100% পর্যন্ত একটি শতাংশ হয় তবে আপনি 20em মতো একটি নির্দিষ্ট দৈর্ঘ্যও নির্দিষ্ট করতে পারেন।

উদাহরণস্বরূপ, যদি আপনি কোনও বিষয় প্রবেশের মুহূর্ত থেকে একটি অ্যানিমেশন চালাতে চান, তাহলে পরিসর-শুরু হিসাবে entry 0% নির্বাচন করুন। বিষয় প্রবেশের সময় এটি শেষ করতে, পরিসর-শেষের জন্য মান হিসাবে entry 100% নির্বাচন করুন।

CSS-এ, আপনি animation-range প্রোপার্টি ব্যবহার করে এটি সেট করতে পারেন। উদাহরণ:

animation-range: entry 0% entry 100%;

জাভাস্ক্রিপ্টে, rangeStart এবং rangeEnd বৈশিষ্ট্য ব্যবহার করুন।

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

প্রতিটি range-name কী প্রতিনিধিত্ব করে এবং শতাংশগুলি কীভাবে শুরু এবং শেষ অবস্থানগুলিকে প্রভাবিত করে তা দেখতে নীচের এম্বেড করা টুলটি ব্যবহার করুন। range-start কে entry 0% এবং range-end কে cover 50% জন্য সেট করার চেষ্টা করুন, এবং তারপর অ্যানিমেশন ফলাফল দেখতে স্ক্রোলবারটি টেনে আনুন।

একটি রেকর্ডিং দেখুন

এই View Timeline Ranges টুলগুলি ব্যবহার করার সময় আপনি লক্ষ্য করতে পারেন যে, কিছু রেঞ্জ দুটি ভিন্ন range-name + range-offset সংমিশ্রণ দ্বারা লক্ষ্য করা যেতে পারে। উদাহরণস্বরূপ, entry 0% , entry-crossing 0% , এবং cover 0% সব একই এলাকাকে লক্ষ্য করে।

যখন range-start এবং range-end একই range-name কে টার্গেট করে এবং পুরো range জুড়ে বিস্তৃত হয় - 0% থেকে 100% পর্যন্ত - তখন আপনি মানটিকে কেবল range name এ ছোট করতে পারেন। উদাহরণস্বরূপ, animation-range: entry 0% entry 100%; কে অনেক ছোট animation-range: entry এ পুনর্লিখন করা যেতে পারে।

ডেমো: ছবি প্রকাশ

স্ক্রোলপোর্টে প্রবেশ করার সাথে সাথে ছবিগুলিতে এই ডেমোটি ম্লান হয়ে যায়। এটি একটি অ্যানোনিমাস ভিউ টাইমলাইন ব্যবহার করে করা হয়। অ্যানিমেশন রেঞ্জটি এমনভাবে পরিবর্তন করা হয়েছে যাতে প্রতিটি ছবি স্ক্রোলারের অর্ধেক অংশে থাকাকালীন সম্পূর্ণ অস্বচ্ছতা বজায় থাকে।

✨ নিজে চেষ্টা করে দেখুন

অ্যানিমেটেড ক্লিপ-পাথ ব্যবহার করে সম্প্রসারণ প্রভাব অর্জন করা হয়। এই প্রভাবের জন্য ব্যবহৃত CSS হল:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

CSS-এ একটি নামক ভিউ প্রোগ্রেস টাইমলাইন তৈরি করা হচ্ছে

Scroll Timelines-এর মতো, আপনি View Timelines নামেও একটি সংস্করণ তৈরি করতে পারেন। scroll-timeline-* বৈশিষ্ট্যের পরিবর্তে আপনি view-timeline- উপসর্গ বহনকারী ভেরিয়েন্ট ব্যবহার করেন, যেমন view-timeline-name এবং view-timeline-axis ।

একই ধরণের মান প্রযোজ্য, এবং একটি নামযুক্ত টাইমলাইন অনুসন্ধানের জন্য একই নিয়ম প্রযোজ্য।

ডেমো: ছবি প্রকাশ, পুনর্বিবেচনা করা হয়েছে

আগের ছবির ডেমো রিভিল করে, সংশোধিত কোডটি দেখতে এরকম:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

view-timeline-name: revealing-image ব্যবহার করে, উপাদানটি তার নিকটতম স্ক্রোলারের মধ্যে ট্র্যাক করা হবে। তারপর একই মানটি animation-timeline সম্পত্তির মান হিসাবে ব্যবহার করা হবে। ভিজ্যুয়াল আউটপুট ঠিক আগের মতোই থাকবে।

✨ নিজে চেষ্টা করে দেখুন

জাভাস্ক্রিপ্টে একটি ভিউ প্রোগ্রেস টাইমলাইন তৈরি করা

জাভাস্ক্রিপ্টে একটি View Timeline তৈরি করতে, ViewTimeline ক্লাসের একটি নতুন ইনস্ট্যান্স তৈরি করুন। আপনি যে subject ট্র্যাক করতে চান তা সহ একটি প্রপার্টি ব্যাগে রাখুন, axis , এবং inset .

• subject : আপনি যে উপাদানটি ট্র্যাক করতে চান তার নিজস্ব স্ক্রলারের মধ্যে তার একটি রেফারেন্স।
• axis : ট্র্যাক করার জন্য অক্ষ। CSS ভেরিয়েন্টের মতো, গৃহীত মানগুলি হল block , inline , x , এবং y ।
• inset : বাক্সটি দৃশ্যমান কিনা তা নির্ধারণ করার সময় স্ক্রোলপোর্টের একটি ইনসেট (ধনাত্মক) বা আউটসেট (ঋণাত্মক) সমন্বয়।

const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

এটি একটি ওয়েব অ্যানিমেশনে সংযুক্ত করতে, এটিকে timeline প্রপার্টি হিসেবে দিন এবং যদি কোনও duration থাকে তবে তা বাদ দিন। ঐচ্ছিকভাবে, rangeStart এবং rangeEnd প্রপার্টি ব্যবহার করে রেঞ্জের তথ্য দিন।

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ নিজে চেষ্টা করে দেখুন

চেষ্টা করার জন্য আরও কিছু জিনিস

এক সেট কীফ্রেম ব্যবহার করে একাধিক ভিউ টাইমলাইন রেঞ্জে সংযুক্ত করা হচ্ছে

চলুন এই পরিচিতি তালিকার ডেমোটি দেখে নেওয়া যাক যেখানে তালিকার এন্ট্রিগুলি অ্যানিমেটেড করা হয়েছে। তালিকার এন্ট্রিটি নীচের দিক থেকে স্ক্রোলপোর্টে প্রবেশ করার সাথে সাথে এটি স্লাইড+ফেইড হয়ে যায় এবং উপরের স্ক্রোলপোর্ট থেকে বেরিয়ে আসার সাথে সাথে এটি স্লাইড+ফেইড হয়ে যায়।

✨ নিজে চেষ্টা করে দেখুন

এই ডেমোর জন্য, প্রতিটি এলিমেন্টকে একটি ভিউ টাইমলাইন দিয়ে সজ্জিত করা হয়েছে যা এলিমেন্টটিকে তার স্ক্রলপোর্ট অতিক্রম করার সময় ট্র্যাক করে, তবে দুটি স্ক্রোল-চালিত অ্যানিমেশন এতে সংযুক্ত থাকে। animate-in অ্যানিমেশনটি টাইমলাইনের entry রেঞ্জের সাথে সংযুক্ত থাকে এবং animate-out অ্যানিমেশনটি টাইমলাইনের exit রেঞ্জের সাথে সংযুক্ত থাকে।

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

দুটি ভিন্ন রেঞ্জের সাথে সংযুক্ত দুটি ভিন্ন অ্যানিমেশন চালানোর পরিবর্তে, এমন একটি কীফ্রেম তৈরি করাও সম্ভব যাতে ইতিমধ্যেই পরিসরের তথ্য রয়েছে।

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

যেহেতু কীফ্রেমগুলিতে রেঞ্জের তথ্য থাকে, তাই আপনাকে animation-range নির্দিষ্ট করার প্রয়োজন নেই। ফলাফলটি আগের মতোই থাকবে।

✨ নিজে চেষ্টা করে দেখুন

পূর্বপুরুষ নয় এমন স্ক্রোল টাইমলাইনে সংযুক্ত করা হচ্ছে

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

এই কাজটি করার জন্য, timeline-scope সম্পত্তিটি কার্যকর হয়। আপনি এই সম্পত্তিটি ব্যবহার করে সেই নামের একটি টাইমলাইন ঘোষণা করেন, আসলে এটি তৈরি না করেই। এটি সেই নামের টাইমলাইনটিকে আরও বিস্তৃত সুযোগ দেয়। বাস্তবে, আপনি একটি ভাগ করা প্যারেন্ট এলিমেন্টে timeline-scope সম্পত্তি ব্যবহার করেন যাতে একটি শিশু স্ক্রোলারের টাইমলাইন এটির সাথে সংযুক্ত হতে পারে।

উদাহরণস্বরূপ:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

এই স্নিপেটে:

• .parent উপাদানটি --tl নামে একটি টাইমলাইন ঘোষণা করে। এর যেকোনো শিশু এটিকে animation-timeline বৈশিষ্ট্যের জন্য একটি মান হিসেবে খুঁজে পেতে এবং ব্যবহার করতে পারে।
• .scroller উপাদানটি আসলে --tl নাম দিয়ে একটি Scroll Timeline সংজ্ঞায়িত করে। ডিফল্টরূপে এটি শুধুমাত্র তার শিশুদের কাছে দৃশ্যমান হবে কিন্তু যেহেতু .parent এটিকে scroll-timeline-root হিসাবে সেট করেছে, এটি এর সাথে সংযুক্ত হয়।
• .subject এলিমেন্টটি --tl টাইমলাইন ব্যবহার করে। এটি তার পূর্বপুরুষ গাছের উপরে উঠে .parent এ --tl খুঁজে পায়। .parent এ --tl .scroller এর --tl এর দিকে নির্দেশ করলে, .subject মূলত .scroller এর স্ক্রোল প্রগতি টাইমলাইন ট্র্যাক করবে।

অন্যভাবে বলতে গেলে, আপনি timeline-root ব্যবহার করে একটি টাইমলাইনকে একটি পূর্বপুরুষের (যার নাম hoisting ) উপরে নিয়ে যেতে পারেন, যাতে পূর্বপুরুষের সমস্ত সন্তান এটি অ্যাক্সেস করতে পারে।

timeline-scope প্রপার্টিটি স্ক্রোল টাইমলাইন এবং ভিউ টাইমলাইন উভয়ের সাথেই ব্যবহার করা যেতে পারে।

আরও ডেমো এবং রিসোর্স

scroll-driven-animations.style মিনি-সাইট -এ এই নিবন্ধে কভার করা সমস্ত ডেমো। ওয়েবসাইটটিতে স্ক্রোল-চালিত অ্যানিমেশনের মাধ্যমে কী কী সম্ভব তা তুলে ধরার জন্য আরও অনেক ডেমো রয়েছে।

অতিরিক্ত ডেমোগুলির মধ্যে একটি হল অ্যালবামের কভারের এই তালিকা। প্রতিটি কভার 3D তে ঘোরে কারণ এটি কেন্দ্রবিন্দুতে স্থান করে নেয়।

✨ নিজে চেষ্টা করে দেখুন

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

✨ নিজে চেষ্টা করে দেখুন

scroll-driven-animations.style- এ ভিউ টাইমলাইন রেঞ্জ প্রোগ্রেস ভিজ্যুয়ালাইজেশনের মতো টুলের একটি সংগ্রহও রয়েছে যা এই পোস্টের আগে অন্তর্ভুক্ত করা হয়েছিল।

স্ক্রোল-চালিত অ্যানিমেশনগুলি Google I/O '23-এর ওয়েব অ্যানিমেশনে নতুন কী তা বিভাগেও অন্তর্ভুক্ত করা হয়েছে।