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

স্বেতা গোপালকৃষ্ণন
Swetha Gopalakrishnan
X
সৌরভ রাজপাল
Saurabh Rajpal
X

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

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

যাইহোক, নতুন CSS এবং UI বৈশিষ্ট্যগুলির অংশ হিসাবে ব্রাউজারগুলিতে অবতরণ , আপনি এখন ঘোষণামূলক স্ক্রোল-চালিত অ্যানিমেশন তৈরি করতে পারেন। স্ক্রোল টাইমলাইন এবং ভিউ টাইমলাইনগুলির সাথে, নতুন ধারণা যা বিদ্যমান ওয়েব অ্যানিমেশন API (WAAPI) এবং CSS অ্যানিমেশন API-এর সাথে একীভূত হয়, আপনি এখন শুধুমাত্র কয়েকটি লাইনের কোড সহ মূল থ্রেড থেকে সিল্কি মসৃণ স্ক্রোল-চালিত অ্যানিমেশনগুলি চালাতে পারেন৷ এই কেস স্টাডিতে, আবিষ্কার করুন কিভাবে Tokopedia, redBus, এবং Policybazaar ইতিমধ্যেই এই নতুন বৈশিষ্ট্য থেকে উপকৃত হচ্ছে৷

ব্রাউজার সমর্থন

  • 115
  • 115
  • এক্স

উৎস

টোকোপিডিয়া

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

আমরা প্রচলিত জাভাস্ক্রিপ্ট স্ক্রোল ইভেন্টগুলি ব্যবহার করার তুলনায় আমাদের কোডের লাইনের 80% পর্যন্ত কমাতে পেরেছি এবং লক্ষ্য করেছি যে স্ক্রল করার সময় গড় CPU ব্যবহার 50% থেকে 2% কমে গেছে— অ্যান্ডি উইহালিম , সিনিয়র সফ্টওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া

ব্যবহারকারী স্ক্রোল অবস্থানের উপর ভিত্তি করে শীর্ষ স্টিকি বারের অ্যানিমেটেড পরিবর্তন দৃশ্যমানতা।

কোড

CSS অ্যানিমেশনের অগ্রগতি নিয়ন্ত্রণের জন্য একটি বেনামী স্ক্রোল অগ্রগতি টাইমলাইন সেট করতে নিম্নলিখিত বাস্তবায়ন scroll() ফাংশন ব্যবহার করে। সংজ্ঞায়িত animationRange মধ্যে স্ক্রোল অবস্থানের উপর ভিত্তি করে শীর্ষ স্টিকি বারের দৃশ্যমানতা পরিবর্তিত হয়।

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

লাল বাস

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

ব্যবহারের ক্ষেত্রে

ইমেজ রিভিল সহ ফটো গ্যালারি (মোবাইলের জন্য) এবং কভার ফ্লো (ডেস্কটপের জন্য)।

স্ক্রোল-চালিত অ্যানিমেশন ইমেজ রেডবাস "থিংস টু ডু" ফটো গ্যালারিতে ছবি লোড করার জন্য প্রভাব প্রকাশ করে।

কোড (মোবাইল)

আগের উদাহরণে, টোকোপিডিয়া বেনামী স্ক্রোল অগ্রগতি টাইমলাইন ব্যবহার করেছে। নিম্নলিখিত কোডে, redBus নামের ভিউ প্রগ্রেস টাইমলাইন ব্যবহার করে। অ্যানিমেশনটি <img> উপাদানটির opacity এবং clip-path পরিবর্তন করে উপাদানটির নিকটতম পূর্বপুরুষ স্ক্রোলারের ভিতরে সংজ্ঞায়িত animation-range মধ্যে, যা এই ক্ষেত্রে ফটো গ্যালারি স্ক্রলার।

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

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

পলিসিবাজার

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

স্ক্রোল-চালিত অ্যানিমেশনের সাহায্যে, আমরা ব্যবহারকারীর জন্য পরিকল্পনার তুলনা করার জন্য ভিউপোর্ট স্পেসকে সর্বাধিক করতে সক্ষম হয়েছি, একটি ফোকাসড এবং বিশৃঙ্খল-মুক্ত পড়ার অভিজ্ঞতা নিশ্চিত করে।— ঋষভ মেহরোত্রা , লাইফ ইন্স্যুরেন্স BU, পলিসিবাজারের ডিজাইনের প্রধান ।

স্ক্রোল-চালিত অ্যানিমেশন animate-timeline তুলনা-প্ল্যান টেবিলে ইনভেস্টমেন্ট এবং লাইফ LOB (লাইন অফ বিজনেস)।

কোড

টোকোপিডিয়ার আগের উদাহরণের মতো, পলিসিবাজার CSS অ্যানিমেশনের অগ্রগতি নিয়ন্ত্রণের জন্য একটি বেনামী স্ক্রোল অগ্রগতি টাইমলাইন সেট করতে scroll() ফাংশন ব্যবহার করছে। এই ক্ষেত্রে ফন্টের আকার সঙ্কুচিত করা এবং সংজ্ঞায়িত animation-range মধ্যে স্ক্রোল অবস্থানের উপর ভিত্তি করে হেডার ফেইড করা।

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

ব্যবহারকারীর যাত্রা জুড়ে একটি সাধারণ প্যাটার্ন হিসাবে স্ক্রোল-চালিত অ্যানিমেশন

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

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

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

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (হোম পেজ)

RedBus "থিংস টু ডু" ল্যান্ডিং পৃষ্ঠায় পণ্য কার্ড লোড করার জন্য স্ক্রোল-চালিত অ্যানিমেশন ফ্লাই-ইন প্রভাব৷

পলিসিবাজার (পণ্য তালিকা পাতা)

স্ক্রোল-চালিত অ্যানিমেশন ফেড-ইন, ফেড-আউট অফ প্রোডাক্ট কার্ড ইনভেস্টমেন্ট এবং লাইফ এলওবি (লাইন অফ বিজনেস)।

টোকোপিডিয়া (পণ্যের বিবরণ পৃষ্ঠা)

তালিকাভুক্ত পণ্যগুলির মাধ্যমে স্ক্রোল করার সময় ফেড-ইন, ফেড-আউট অ্যানিমেশন।

স্ক্রোল-চালিত অ্যানিমেশন API ব্যবহার করার সময় যে বিষয়গুলি বিবেচনা করতে হবে৷

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

CSS থেকে আপনি স্ক্রোল-চালিত অ্যানিমেশন ব্যবহার করার আগে অ্যানিমেশন-টাইমলাইনের সমর্থন পরীক্ষা করতে @supports ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:

@supports (animation-timeline: scroll()) {

}

সম্পদ

এই সিরিজের অন্যান্য নিবন্ধগুলি অন্বেষণ করুন যা ইকমার্স কোম্পানিগুলি কীভাবে নতুন CSS এবং UI বৈশিষ্ট্যগুলি যেমন ভিউ ট্রানজিশন, পপওভার, কনটেইনার কোয়েরি এবং has() নির্বাচক ব্যবহার করে উপকৃত হয়েছে সে সম্পর্কে কথা বলে।