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

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

1. আপনি শুরু করার আগে

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

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

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

আপনি কি শিখবেন

সিএসএস-এ স্ক্রোল টাইমলাইন দিয়ে কীভাবে প্যারালাক্স ব্যাকগ্রাউন্ড ইফেক্ট তৈরি করবেন।
সিএসএস-এ স্ক্রোল টাইমলাইন দিয়ে কীভাবে একটি অগ্রগতি বার তৈরি করবেন।
সিএসএসে একটি ভিউ টাইমলাইন দিয়ে কীভাবে একটি চিত্র প্রকাশ প্রভাব তৈরি করবেন।
সিএসএস-এ ভিউ টাইমলাইনের বিভিন্ন ধরনের রেঞ্জ কিভাবে টার্গেট করা যায়।

আপনি কি প্রয়োজন হবে

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

"পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" পতাকা সহ ChromeOS, macOS, বা Windows-এ Chrome-এর সাম্প্রতিক সংস্করণ (115 বা তার পরে) সক্ষম করা সেট করা হয়েছে৷
এইচটিএমএল এর একটি প্রাথমিক ধারণা
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 ফাইলটি খুলুন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

অ্যানিমেশন তৈরি করতে, কীফ্রেমের একটি নিয়মিত সেট ব্যবহার করুন। এটিতে, পটভূমির অবস্থানটি 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() ফাংশন ব্যবহার করা। এটি একটি বেনামী স্ক্রোল অগ্রগতি টাইমলাইন তৈরি করে যা আপনি 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 শাখাটি দেখুন।

5. চিত্র গ্যালারির জন্য একটি অগ্রগতি বার তৈরি করুন৷

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

ক্যারোজেলের জন্য মার্কআপ এই মত দেখায়:

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__entry উপাদানের সংখ্যার উপর ভিত্তি করে যা .gallery__scrollcontainer এ রয়েছে। এটি স্ক্রলারের শৈলী বৈশিষ্ট্যে --num-children কাস্টম বৈশিষ্ট্য দ্বারা প্রদান করা হয়। এটি অ্যানিমেশনের শুরুতে স্ক্রলবারকে একটি নির্দিষ্ট প্রস্থে নেওয়ার অনুমতি দেয়। উদাহরণস্বরূপ, যদি স্ক্রোল কন্টেইনারে চারটি উপাদান থাকে, তাহলে অগ্রগতি বারের শুরুর প্রস্থ 25% হওয়া উচিত, যেমন আপনি 4-এর মধ্যে 1 চিত্রটি দেখতে পাচ্ছেন।

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

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 উপাদানটিতে একটি নামযুক্ত স্ক্রোল অগ্রগতি টাইমলাইন তৈরি করুন এবং সেই নামটি ব্যবহার করে .gallery__progress লিঙ্ক করুন৷

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

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

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

অবশেষে, অ্যানিমেশনটিকে স্ক্রোল প্রগ্রেস টাইমলাইনে লিঙ্ক করতে, উপাদানটিতে 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 শাখাটি দেখুন।

6. স্ক্রলপোর্টে প্রবেশ এবং প্রস্থান করার সাথে সাথে গ্যালারির চিত্রগুলিকে অ্যানিমেট করুন৷

গ্যালারী ইমেজ বিবর্ণ

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

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

একটি ভিউ প্রোগ্রেস টাইমলাইন তৈরি করতে, আপনি 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);
}

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

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

আপনি যদি 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 শাখাটি দেখুন।

7. কীফ্রেমের একটি সেট ব্যবহার করে স্ক্রলপোর্টে প্রবেশ এবং প্রস্থান করার সাথে সাথে গ্যালারী চিত্রগুলিকে অ্যানিমেট করুন

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

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

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

@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 শাখাটি দেখুন।

8. অভিনন্দন!

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

আরও জানুন

সম্পদ: