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

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

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

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

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

দ্রষ্টব্য : স্ক্রল-চালিত অ্যানিমেশন স্পেসিফিকেশন দ্বারা প্রদত্ত জাভাস্ক্রিপ্ট প্রতিরূপটি এই কোডল্যাবে অন্তর্ভুক্ত নয়।

আপনি যা শিখবেন

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

আপনার যা যা লাগবে

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

• ChromeOS, macOS, বা Windows-এ Chrome-এর একটি সাম্প্রতিক সংস্করণ (115 বা তার পরবর্তী), যেখানে "Experimental Web Platform Features" ফ্ল্যাগটি সক্রিয় করা আছে।
• এইচটিএমএল সম্পর্কে প্রাথমিক ধারণা
• সিএসএস সম্পর্কে মৌলিক ধারণা, বিশেষ করে সিএসএস-এ অ্যানিমেশন বিষয়ে।

২. প্রস্তুত হন

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

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

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

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

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

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

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

স্ক্রোল অগ্রগতি টাইমলাইন

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

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

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

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

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

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

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

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

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

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

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

1. এমন একটি অ্যানিমেশন তৈরি করুন যা ব্যাকগ্রাউন্ড ইমেজটির অবস্থান পরিবর্তন করে।
2. ডকুমেন্টের স্ক্রল অগ্রগতির সাথে অ্যানিমেশনটি সংযুক্ত করুন।

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

1. অ্যানিমেশনটি তৈরি করতে, কয়েকটি সাধারণ কীফ্রেম ব্যবহার করুন। এর মধ্যে, ব্যাকগ্রাউন্ডের অবস্থান উল্লম্বভাবে ০% থেকে ১০০% পর্যন্ত সরান:

src/styles.css

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

2. এখন এই কীফ্রেমগুলো বডি এলিমেন্টে যুক্ত করুন:

src/styles.css

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

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

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

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

স্ক্রল প্রোগ্রেস টাইমলাইন তৈরি করার সবচেয়ে সহজ উপায় হলো scroll() ফাংশনটি ব্যবহার করা। এটি একটি অ্যানোনিমাস স্ক্রল প্রোগ্রেস টাইমলাইন তৈরি করে, যা আপনি 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);
}

যেহেতু রুট স্ক্রলারটি বডি এলিমেন্টের নিকটতম প্যারেন্ট স্ক্রলারও হয়ে থাকে, তাই আপনি ` 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);
  }
}

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

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

src/styles.css

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

যদিও এই কোডটি দেখে মনে হতে পারে যে এটি কাজ করবে, কিন্তু nearest ' ব্যবহার করে স্বয়ংক্রিয় স্ক্রল কন্টেইনার খোঁজার পদ্ধতির কারণে এটি কাজ করে না। নিকটতম স্ক্রলার খোঁজার সময়, এলিমেন্টটি শুধুমাত্র সেই এলিমেন্টগুলোকেই বিবেচনা করে যেগুলো তার অবস্থানকে প্রভাবিত করতে পারে। যেহেতু .gallery__progress এলিমেন্টটি 'absolutely positioned', তাই এর অবস্থান নির্ধারণকারী প্রথম প্যারেন্ট এলিমেন্টটি হলো .gallery এলিমেন্ট, কারণ এতে position: relative প্রয়োগ করা আছে। এর মানে হলো, .gallery__scrollcontainer এলিমেন্টটি—যেটিকে টার্গেট করা প্রয়োজন—এই স্বয়ংক্রিয় খোঁজার সময় একেবারেই বিবেচিত হয় না।

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

একটি নামযুক্ত স্ক্রোল অগ্রগতি টাইমলাইন তৈরি করুন এবং লিঙ্ক করুন

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

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

অবশেষে, অ্যানিমেশনটিকে স্ক্রল প্রোগ্রেস টাইমলাইনের সাথে লিঙ্ক করতে, যে এলিমেন্টটিকে অ্যানিমেট করতে হবে তার 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> এর সাহায্যে, কোনো এলিমেন্ট দৃশ্যমান হবে কি না, তা নির্ধারণ করতে আপনি একটি অফসেট (ধনাত্মক বা ঋণাত্মক) নির্দিষ্ট করতে পারেন।

দ্রষ্টব্য : একটি ভিউ টাইমলাইনের <scroller> নির্ধারণ করা সম্ভব নয়, কারণ এটি সর্বদা তার নিকটতম প্যারেন্ট স্ক্রোলারের মধ্যে থাকা বিষয়টিকে ট্র্যাক করে।

• কীফ্রেমগুলো আগে থেকেই তৈরি করা আছে, তাই আপনাকে শুধু সেগুলো সংযুক্ত করতে হবে। এটি করার জন্য, প্রতিটি .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);
}

দ্রষ্টব্য : view() ব্যবহার করে, আপনি একটি অ্যানোনিমাস ভিউ প্রোগ্রেস টাইমলাইন তৈরি করেন। একটি নেমড স্ক্রল প্রোগ্রেস টাইমলাইন তৈরির মতোই, আপনি এর জন্য নির্দিষ্ট প্রোপার্টি ব্যবহার করে একটি নেমড ভিউ প্রোগ্রেস টাইমলাইন তৈরি করতে পারেন। প্রোপার্টিগুলো হলো view-timeline-name এবং view-timeline-axis । এগুলো তাদের scroll-timeline-* প্রতিরূপগুলোর মতোই কাজ করে।

অগ্রগতি টাইমলাইন দেখার পরিসর সীমিত করুন

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

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

1. শুধুমাত্র সাবজেক্টের 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 শুরু এবং শেষের জন্য ভিন্ন ভিন্ন পরিসর নির্ধারণ করা সম্পূর্ণ সম্ভব।

2. যেহেতু এখানে শুরু এবং শেষের রেঞ্জ একই এবং ডিফল্ট অফসেট ব্যবহার করা হয়, তাই 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 {
    ...
  }
}

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

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%);
  }
}

2. যখন কীফ্রেমগুলিতে রেঞ্জের তথ্য উপস্থিত থাকে, তখন আপনাকে আর আলাদাভাবে 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-এ কীভাবে স্ক্রল প্রোগ্রেস টাইমলাইন এবং ভিউ প্রোগ্রেস টাইমলাইন তৈরি করতে হয় তা জানেন!

আরও জানুন

সম্পদ:

• স্ক্রল-চালিত অ্যানিমেশন ব্যবহার করে স্ক্রল করার সময় উপাদানগুলোকে অ্যানিমেট করুন
• টাইমলাইন রেঞ্জ ভিজ্যুয়ালাইজার দেখুন
• ওয়েব অ্যানিমেশনে নতুন কী আছে (গুগল আই/ও '২৩)