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

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

Bramus

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

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

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

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

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

এটি পারফরম্যান্ট স্ক্রোল-চালিত অ্যানিমেশন তৈরি করে যা স্ক্রোলিংয়ের সাথে সিঙ্ক করা অসম্ভব বা খুব কঠিন।

ক্রোম সংস্করণ 115 থেকে 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 এ শুরু হয় এবং ঘড়ির কাঁটার সময় অগ্রসর হওয়ার সাথে সাথে এগিয়ে যেতে শুরু করে। এটি হল ডিফল্ট অ্যানিমেশন টাইমলাইন এবং এখন পর্যন্ত, একমাত্র অ্যানিমেশন টাইমলাইনে আপনার অ্যাক্সেস ছিল৷

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

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

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

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

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

✨ নিজের জন্য এটি চেষ্টা করুন

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

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

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

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

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

✨ নিজের জন্য এটি চেষ্টা করুন

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

স্ক্রোল অগ্রগতি সময়রেখার সাথে ব্যবহারিক হচ্ছে

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

CSS-এ স্ক্রল টাইমলাইন তৈরি করার সবচেয়ে সহজ উপায় হল scroll() ফাংশন ব্যবহার করা। এটি একটি বেনামী স্ক্রোল টাইমলাইন তৈরি করে যা আপনি নতুন 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-timeline-name সিএসএস বৈশিষ্ট্যটি আপনার পছন্দের একটি শনাক্তকারীতে সেট করুন। মান দিয়ে শুরু করতে হবে -- ।

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

অবশেষে, অ্যানিমেশনটিকে স্ক্রোল প্রগ্রেস টাইমলাইনে লিঙ্ক করতে, উপাদানটিতে 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 শর্টহ্যান্ডে scroll-timeline-name এবং scroll-timeline-axis একত্রিত করতে পারেন। যেমন:

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 অ্যানিমেটেড হয়ে যায়। স্ক্রল প্রগ্রেস টাইমলাইন --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%',
  }
);

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

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

এই ভিউ টাইমলাইন রেঞ্জস টুলগুলির সাথে খেলার সময় আপনি লক্ষ্য করতে পারেন, কিছু রেঞ্জ দুটি ভিন্ন রেঞ্জ-নাম + রেঞ্জ-অফসেট সমন্বয় দ্বারা লক্ষ্য করা যেতে পারে। উদাহরণস্বরূপ, entry 0% , entry-crossing 0% , এবং cover 0% সব একই এলাকাকে লক্ষ্য করে।

যখন রেঞ্জ-স্টার্ট এবং রেঞ্জ-এন্ড একই রেঞ্জ-নাম টার্গেট করে এবং পুরো ব্যাপ্তিটি 0% থেকে 100% পর্যন্ত বিস্তৃত করে – আপনি মানটিকে সহজভাবে পরিসরের নামে ছোট করতে পারেন। উদাহরণস্বরূপ, 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-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 সম্পত্তির মান হিসাবে ব্যবহার করা হয়। ভিজ্যুয়াল আউটপুট ঠিক আগের মতই।

✨ নিজের জন্য এটি চেষ্টা করুন

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

জাভাস্ক্রিপ্টে একটি ভিউ টাইমলাইন তৈরি করতে, 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 নামের একটি স্ক্রোল টাইমলাইন সংজ্ঞায়িত করে। ডিফল্টরূপে এটি শুধুমাত্র তার বাচ্চাদের কাছে দৃশ্যমান হবে কিন্তু যেহেতু .parent এটিকে scroll-timeline-root হিসাবে সেট করেছে, এটি এটির সাথে সংযুক্ত করে।
• .subject উপাদান --tl টাইমলাইন ব্যবহার করে। এটি তার পূর্বপুরুষ গাছের উপরে উঠে যায় এবং .parent মাতার উপর --tl খুঁজে পায়। .scroller এর --tl দিকে নির্দেশ করে .parent এ --tl দিয়ে, .subject মূলত .scroller এর স্ক্রোল অগ্রগতির টাইমলাইন ট্র্যাক করবে।

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

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

আরো ডেমো এবং সম্পদ

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

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

✨ নিজের জন্য এটি চেষ্টা করুন

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

✨ নিজের জন্য এটি চেষ্টা করুন

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

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