এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

CSS-এ স্ক্রোল-চালিত অ্যানিমেশন দিয়ে শুরু করুন

১. শুরু করার আগে

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

Chrome 115-এ নতুন বৈশিষ্ট্য হল জাভাস্ক্রিপ্ট ক্লাস এবং CSS বৈশিষ্ট্যের একটি সেট সমর্থন যা আপনাকে সহজেই ঘোষণামূলক স্ক্রোল-চালিত অ্যানিমেশন তৈরি করতে দেয়। এই নতুন APIগুলি বিদ্যমান ওয়েব অ্যানিমেশন এবং CSS অ্যানিমেশন API-এর সাথে একত্রে কাজ করে।

এই কোডল্যাব আপনাকে CSS ব্যবহার করে স্ক্রল-চালিত অ্যানিমেশন তৈরি করতে শেখাবে। এই কোডল্যাবটি সম্পূর্ণ করার মাধ্যমে, আপনি এই আকর্ষণীয় বৈশিষ্ট্য দ্বারা প্রবর্তিত অনেক নতুন CSS বৈশিষ্ট্যের সাথে পরিচিত হবেন, যেমন scroll-timeline , view-timeline , animation-timeline , এবং animation-range ।

তুমি কি শিখবে

সিএসএস-এ স্ক্রোল টাইমলাইন ব্যবহার করে কীভাবে একটি প্যারালাক্স ব্যাকগ্রাউন্ড ইফেক্ট তৈরি করবেন।
CSS-এ স্ক্রোল টাইমলাইন ব্যবহার করে কীভাবে একটি অগ্রগতি বার তৈরি করবেন।
CSS-এ ভিউ টাইমলাইন ব্যবহার করে কীভাবে একটি ইমেজ রিভিল ইফেক্ট তৈরি করবেন।
CSS-এ ভিউ টাইমলাইনের বিভিন্ন ধরণের রেঞ্জ কীভাবে লক্ষ্য করা যায়।

তোমার যা লাগবে

নিম্নলিখিত ডিভাইসের সমন্বয়গুলির মধ্যে একটি:

ChromeOS, macOS, অথবা Windows-এ Chrome-এর একটি সাম্প্রতিক সংস্করণ (১১৫ বা তার পরবর্তী) যেখানে "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" ফ্ল্যাগ সক্ষম করা আছে।
HTML এর একটি মৌলিক ধারণা
CSS সম্পর্কে মৌলিক ধারণা, বিশেষ করে CSS-এ অ্যানিমেশন।

2. সেট আপ করুন

এই প্রকল্পের জন্য আপনার যা কিছু প্রয়োজন তা একটি GitHub সংগ্রহস্থলে পাওয়া যাবে। শুরু করতে, কোডটি ক্লোন করুন এবং আপনার পছন্দের ডেভেলপার পরিবেশে এটি খুলুন।

একটি নতুন ব্রাউজার ট্যাব খুলুন এবং https://github.com/googlechromelabs/io23-scroll-driven-animations-codelab এ যান।
সংগ্রহস্থলটি ক্লোন করুন।
আপনার পছন্দের IDE তে কোডটি খুলুন।
নির্ভরতা ইনস্টল করতে npm install চালান।
npm start চালান এবং http://localhost:3000/ দেখুন।
অথবা, যদি আপনার npm ইনস্টল না থাকে, তাহলে Chrome এ src/index.html ফাইলটি খুলুন।

৩. অ্যানিমেশন টাইমলাইন সম্পর্কে জানুন

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

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

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

CSS-এ, এই টাইমলাইনগুলি animation-timeline বৈশিষ্ট্য ব্যবহার করে একটি অ্যানিমেশনের সাথে সংযুক্ত করা যেতে পারে। এই নতুন টাইমলাইনগুলির অর্থ কী এবং এগুলি একে অপরের থেকে কীভাবে আলাদা তা একবার দেখুন।

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

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

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

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

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

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

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

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

সম্ভাব্য ভিউ টাইমলাইন রেঞ্জগুলি যা আপনি লক্ষ্য করতে পারেন তা হল cover , contain , entry , exit , entry-crossing , এবং exit-crossing । এই রেঞ্জগুলি এই কোডল্যাবে পরে ব্যাখ্যা করা হয়েছে তবে যদি আপনি জানতে অধীর আগ্রহে থাকেন, তাহলে https://goo.gle/view-timeline-range-tool এ অবস্থিত টুলটি ব্যবহার করে প্রতিটি রেঞ্জ কী প্রতিনিধিত্ব করে তা দেখুন।

৪. একটি প্যারালাক্স ব্যাকগ্রাউন্ড ইফেক্ট তৈরি করুন

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

এটি বাস্তবায়নের জন্য, দুটি পদক্ষেপ নিতে হবে:

এমন একটি অ্যানিমেশন তৈরি করুন যা ব্যাকগ্রাউন্ড ছবির অবস্থান পরিবর্তন করে।
ডকুমেন্টের স্ক্রোল অগ্রগতির সাথে অ্যানিমেশনটি লিঙ্ক করুন।

অ্যানিমেশন তৈরি করুন

অ্যানিমেশন তৈরি করতে, নিয়মিত কীফ্রেমের একটি সেট ব্যবহার করুন। এতে, ব্যাকগ্রাউন্ডের অবস্থানটি 0% থেকে উল্লম্বভাবে 100% এ সরান:

src/styles.css

@keyframes move-background {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}

এবার এই কীফ্রেমগুলি বডি এলিমেন্টের সাথে সংযুক্ত করুন:

src/styles.css

body {
  animation: 1s linear move-background;
}

এই কোডের সাহায্যে, move-background অ্যানিমেশনটি বডি এলিমেন্টে যোগ করা হয়। এর animation-duration বৈশিষ্ট্যটি এক সেকেন্ডে সেট করা হয় এবং এটি একটি linear ইজিং ব্যবহার করে।

একটি বেনামী স্ক্রোল প্রগতি টাইমলাইন ব্যবহার করে অ্যানিমেশনটিকে রুটের স্ক্রোল প্রগতির সাথে লিঙ্ক করুন।

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

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

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

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

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

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

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

বডিতে animation-timeline প্রোপার্টির মান হিসেবে scroll(root block) সেট করুন।
অধিকন্তু, যেহেতু সেকেন্ডে প্রকাশ করা animation-duration অর্থহীন, তাই সময়কালটি auto তে সেট করুন। যদি আপনি একটি animation-duration নির্দিষ্ট না করেন, তবে এটি ডিফল্টভাবে auto তে থাকবে।

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(root block);
}

যেহেতু রুট স্ক্রোলারটি body এলিমেন্টের জন্য সবচেয়ে কাছের প্যারেন্ট স্ক্রোলার, তাই আপনি nearest এর একটি মানও ব্যবহার করতে পারেন:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(nearest block);
}

যেহেতু nearest এবং block হল ডিফল্ট মান, আপনি এগুলি বাদ দিতেও পারেন। সেই ক্ষেত্রে, কোডটি এভাবে সরলীকৃত করা যেতে পারে:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll();
}

আপনার পরিবর্তনগুলি যাচাই করুন

যদি সবকিছু ঠিকঠাক থাকে, তাহলে এখন আপনার এটি থাকা উচিত:

যদি না হয়, তাহলে কোডের solution-step-1 শাখাটি দেখুন।

৫. ইমেজ গ্যালারির জন্য একটি অগ্রগতি বার তৈরি করুন

পৃষ্ঠাটিতে একটি অনুভূমিক ক্যারোজেল রয়েছে যার একটি অগ্রগতি বার প্রয়োজন যা নির্দেশ করে যে আপনি বর্তমানে কোন ছবিটি দেখছেন।

ক্যারোজেলের মার্কআপটি এরকম দেখাচ্ছে:

src/index.html

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

প্রগতি বারের কীফ্রেমগুলি ইতিমধ্যেই জায়গায় আছে এবং দেখতে এইরকম:

src/styles.css

@keyframes adjust-progress {
  from {
    transform: scaleX(calc(1 / var(--num-images)));
  }
  to {
    transform: scaleX(1);
  }
}

দ্রষ্টব্য : এই কীফ্রেম সেটটিতে .gallery__scrollcontainer এ থাকা .gallery__entry উপাদানের সংখ্যার উপর ভিত্তি করে একটি start scaleX() সেট রয়েছে। এটি স্ক্রোলারের স্টাইল অ্যাট্রিবিউটে --num-children কাস্টম প্রপার্টি দ্বারা সরবরাহ করা হয়। এটি অ্যানিমেশনের শুরুতে স্ক্রোলবারকে একটি নির্দিষ্ট প্রস্থ নিতে দেয়। উদাহরণস্বরূপ, যদি স্ক্রোল কন্টেইনারে চারটি উপাদান থাকে, তাহলে অগ্রগতি বারের শুরুর প্রস্থ 25% হওয়া উচিত, যেমন আপনি 4 এর 1 নম্বর চিত্রটি দেখতে পাচ্ছেন।

এই অ্যানিমেশনটি gallery__progress এলিমেন্টের সাথে একটি Scroll Progress Timeline সংযুক্ত করতে হবে। আগের ধাপে দেখানো হয়েছে, আপনি scroll() ফাংশন ব্যবহার করে একটি বেনামী Scroll Progress Timeline তৈরি করে এটি অর্জন করতে পারেন:

src/styles.css

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  animation-timeline: scroll(nearest inline);
}

যদিও এই কোডটি কাজ করবে বলে মনে হতে পারে, এটি nearest কাজ ব্যবহার করে স্বয়ংক্রিয় স্ক্রোল কন্টেইনার লুকআপের কারণে নয়। নিকটতম স্ক্রোলার অনুসন্ধান করার সময়, উপাদানটি কেবল সেই উপাদানগুলি বিবেচনা করবে যা এর অবস্থানকে প্রভাবিত করতে পারে। যেহেতু .gallery__progress সম্পূর্ণরূপে অবস্থান করা হয়েছে, তাই প্রথম প্যারেন্ট উপাদান যা এর অবস্থান নির্ধারণ করবে তা হল .gallery উপাদান কারণ এতে position: relative প্রয়োগ করা হয়েছে। এর অর্থ হল .gallery__scrollcontainer উপাদান - যা স্ক্রোলারকে লক্ষ্যবস্তু করা প্রয়োজন - এই স্বয়ংক্রিয় লুকআপের সময় মোটেও বিবেচনা করা হয় না।

এই সমস্যা সমাধানের জন্য, .gallery__scrollcontainer এলিমেন্টে একটি Scroll Progress Timeline তৈরি করুন এবং সেই নাম ব্যবহার করে .gallery__progress কে এর সাথে লিঙ্ক করুন।

একটি নামযুক্ত স্ক্রোল প্রগতি সময়রেখা তৈরি করুন এবং লিঙ্ক করুন

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

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

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

styles.css ফাইলটি পরিবর্তন করে নিম্নলিখিতগুলি অন্তর্ভুক্ত করুন:

src/styles.css

.gallery__scrollcontainer {
  /* Create the gallery-is-scrolling timeline */
  scroll-timeline-name: --gallery-is-scrolling;
  scroll-timeline-axis: inline;
}

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  /* Set gallery-is-scrolling as the timeline */
  animation-timeline: --gallery-is-scrolling;
}

আপনার পরিবর্তনগুলি যাচাই করুন

যদি সবকিছু ঠিকঠাক থাকে, তাহলে এখন আপনার এটি থাকা উচিত:

যদি না হয়, তাহলে কোডের solution-step-2 শাখাটি দেখুন।

৬. স্ক্রোলপোর্টে প্রবেশ এবং প্রস্থান করার সময় গ্যালারির ছবিগুলিকে অ্যানিমেট করুন।

গ্যালারির ছবিগুলিতে বিবর্ণতা

একটি বেনামী ভিউ প্রোগ্রেস টাইমলাইন সেট আপ করুন

গ্যালারির ছবিগুলো যখন দৃশ্যমান হবে তখন সেগুলোকে বিবর্ণ করে ফেলার জন্য একটি চমৎকার ইফেক্ট যোগ করা হবে। এর জন্য, আপনি একটি ভিউ প্রোগ্রেস টাইমলাইন ব্যবহার করতে পারেন।

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

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

কীফ্রেমগুলি ইতিমধ্যেই জায়গায় আছে, তাই আপনাকে কেবল সেগুলি সংযুক্ত করতে হবে। এটি করার জন্য, প্রতিটি .gallery__entry উপাদানের উপর একটি ভিউ প্রোগ্রেস টাইমলাইন তৈরি করুন।

src/styles.css

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

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
}

ভিউ প্রোগ্রেস টাইমলাইনের পরিসর সীমিত করুন

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

কারণ ভিউ প্রোগ্রেস টাইমলাইনের ডিফল্ট রেঞ্জ হল পূর্ণ রেঞ্জ। এটি cover রেঞ্জ নামে পরিচিত।

শুধুমাত্র সাবজেক্টের entry রেঞ্জ টার্গেট করতে, অ্যানিমেশনটি কখন চালানো উচিত তা সীমাবদ্ধ করার জন্য animation-range CSS প্রোপার্টি ব্যবহার করুন।

src/styles.css

.gallery__entry {
  animation: linear fade-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry 0% entry 100%;
}

অ্যানিমেশনটি এখন entry 0% (বিষয়টি স্ক্রোলারে প্রবেশ করতে চলেছে) থেকে entry 100% (বিষয়টি সম্পূর্ণরূপে স্ক্রোলারে প্রবেশ করেছে) চলে।

সম্ভাব্য ভিউ টাইমলাইন রেঞ্জগুলি নিম্নরূপ:

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

প্রতিটি রেঞ্জ কী প্রতিনিধিত্ব করে এবং শতাংশগুলি শুরু এবং শেষ অবস্থানগুলিকে কীভাবে প্রভাবিত করে তা দেখতে https://goo.gle/view-timeline-range-tool এ থাকা টুলটি ব্যবহার করুন।

যেহেতু এখানে শুরু এবং শেষের রেঞ্জ একই এবং ডিফল্ট অফসেট ব্যবহার করা হয়েছে, তাই animation-range একটি একক অ্যানিমেশন রেঞ্জ নামে সরলীকৃত করুন:

src/styles.css

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry;
}

গ্যালারির ছবিগুলো মুছে ফেলুন

স্ক্রোলার থেকে বেরিয়ে আসার সাথে সাথে ছবিগুলিকে বিবর্ণ করার জন্য, আপনি অ্যানিমেট-ইন অ্যানিমেশনের মতোই করতে পারেন তবে একটি ভিন্ন পরিসর লক্ষ্য করুন।

src/styles.css

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

.gallery__entry {
  animation: linear animate-in, linear animate-out;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry, exit;
}

animate-in কীফ্রেমগুলি entry রেঞ্জে এবং animate-out কীফ্রেমগুলি exit রেঞ্জে প্রয়োগ করা হবে।

আপনার পরিবর্তনগুলি যাচাই করুন

যদি সবকিছু ঠিকঠাক থাকে, তাহলে এখন আপনার এটি থাকা উচিত:

যদি না হয়, তাহলে কোডের solution-step-3 শাখাটি দেখুন।

৭. স্ক্রোলপোর্টে প্রবেশ এবং প্রস্থান করার সময় গ্যালারির ছবিগুলিকে অ্যানিমেট করুন, এক সেট কীফ্রেম ব্যবহার করে।

এক সেট কীফ্রেমের ক্ষেত্রে

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

কীফ্রেমগুলির আকৃতি এইরকম দেখাচ্ছে:

@keyframes keyframes-name {
  range-name range-offset {
    ...
  }
  range-name range-offset {
    ...
  }
}

ফেড-ইন এবং ফেড-আউট কীফ্রেমগুলিকে এভাবে একত্রিত করুন:

src/styles.css

@keyframes animate-in-and-out {
  entry 0% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  entry 90% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }

  exit 10% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  exit 100% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

যখন কীফ্রেমে রেঞ্জের তথ্য উপস্থিত থাকে, তখন আপনাকে আর আলাদাভাবে animation-range নির্দিষ্ট করতে হবে না। animation বৈশিষ্ট্য হিসাবে কীফ্রেমগুলি সংযুক্ত করুন।

src/styles.css

.gallery__entry {
  animation: linear animate-in-and-out both;
  animation-duration: auto;
  animation-timeline: view(inline);
}

আপনার পরিবর্তনগুলি যাচাই করুন

যদি সবকিছু ঠিকঠাক থাকে, তাহলে আপনার আগের ধাপের মতোই ফলাফল পাওয়া উচিত। যদি না হয়, তাহলে কোডের solution-step-4 শাখাটি দেখুন।

৮. অভিনন্দন!

তুমি এই কোডল্যাবটি শেষ করেছো এবং এখন জানো কিভাবে CSS-এ স্ক্রল প্রোগ্রেস টাইমলাইন তৈরি করতে হয় এবং প্রোগ্রেস টাইমলাইন দেখতে হয়!

আরও জানুন

সম্পদ: