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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

টোকোপিডিয়া

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

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

কোড

নিম্নলিখিত ইমপ্লিমেন্টেশনটি 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 দিয়ে প্রতিস্থাপন করে একই প্রভাব অর্জন করতে সক্ষম হয়েছে।

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

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

কোড (মোবাইল)

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

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

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

পলিসিবাজার

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

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

কোড

টোকোপিডিয়ার আগের উদাহরণটির মতোই, পলিসিবাজার 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;
}

রেডবাস (হোম পেজ)

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

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

স্ক্রল-চালিত অ্যানিমেশন এপিআই ব্যবহার করার সময় বিবেচ্য বিষয়সমূহ

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

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

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

}

সম্পদ

• স্ক্রোল-চালিত অ্যানিমেশন ডেমো
• স্ক্রল-চালিত অ্যানিমেশন ব্যবহার করে স্ক্রল করার সময় উপাদানগুলোকে অ্যানিমেট করুন
• কোডল্যাব: CSS-এ স্ক্রল-চালিত অ্যানিমেশন দিয়ে শুরু করা
• ক্রোম এক্সটেনশন: স্ক্রল-চালিত অ্যানিমেশন ডিবাগার
• স্ক্রোল-টাইমলাইন পলিফিল
• আপনি কি কোনো বাগ বা নতুন ফিচার সম্পর্কে জানাতে চান? আমরা আপনার কথা শুনতে আগ্রহী !

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

• আপনার ইকমার্স সাইটের জন্য ওয়েব ইউআই ক্যাপাবিলিটি কেন গুরুত্বপূর্ণ?
• ট্রানজিশন কেস স্টাডিগুলি দেখুন
• পপওভার এপিআই কেস স্টাডিজ
• কন্টেইনার কোয়েরি কেস স্টাডি
• :has() সিলেক্টরের কেস স্টাডি