مطالعات موردی انیمیشن های اسکرول محور

Swetha Gopalakrishnan

Saurabh Rajpal

انیمیشن های اسکرول محور یک الگوی UX رایج در وب هستند. یک انیمیشن اسکرول محور به موقعیت اسکرول یک ظرف اسکرول مرتبط است. این بدان معنی است که با اسکرول کردن به بالا یا پایین، انیمیشن پیوند داده شده در پاسخ مستقیم به جلو یا عقب می رود. نمونه‌هایی از این افکت‌هایی مانند تصاویر پس‌زمینه اختلاف منظر یا نشانگرهای خواندن هستند که در حین حرکت حرکت می‌کنند.

توسعه دهندگان معمولاً با استفاده از جاوا اسکریپت برای پاسخ دادن به رویدادهای اسکرول در رشته اصلی، انیمیشن های اسکرول-محور ایجاد می کنند. این امر باعث می‌شود که ایجاد انیمیشن‌های اسکرول‌محور عملکردی که با پیمایش همگام هستند، دشوار باشد، زیرا رویدادهای اسکرول به‌صورت ناهمزمان ارائه می‌شوند، و اغلب به دلیل قرار گرفتن در رشته اصلی منجر به jank می‌شود.

با این حال، به‌عنوان بخشی از ویژگی‌های جدید CSS و UI که در مرورگرها فرود می‌آیند ، اکنون می‌توانید انیمیشن‌های پیمایش محور اعلامی ایجاد کنید. با Scroll Timelines و View Timelines، مفاهیم جدیدی که با Web Animations API (WAAPI) و CSS Animations API ادغام می‌شوند، اکنون می‌توانید انیمیشن‌های اسکرول‌محور ابریشمی و صافی داشته باشید که تنها با چند خط کد از رشته اصلی خارج می‌شوند. در این مطالعه موردی، کشف کنید که چگونه Tokopedia، redBus، و Policybazaar در حال حاضر از این ویژگی جدید سود می برند.

توکوپدیا

توکوپدیا پیاده‌سازی‌های جاوا اسکریپت سفارشی قبلی خود را با انیمیشن‌های Scroll-driven جایگزین کرد تا عملکرد صفحه خود را بهینه کند و تجربه کلی مرور را در قیف تبدیل تجارت الکترونیکی خود بهبود بخشد.

ما موفق شدیم تا 80٪ از خطوط کد خود را در مقایسه با استفاده از رویدادهای اسکرول معمولی جاوا اسکریپت کاهش دهیم و مشاهده کردیم که میانگین استفاده از CPU از 50٪ به 2٪ در حین پیمایش کاهش یافته است - Andy Wihalim ، مهندس ارشد نرم افزار، Tokopedia

کد

پیاده سازی زیر از تابع scroll() برای تنظیم جدول زمانی پیشرفت اسکرول ناشناس برای کنترل پیشرفت انیمیشن CSS استفاده می کند. قابلیت مشاهده نوار چسبنده بالا بر اساس موقعیت اسکرول در محدوده 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

redBus دارای انیمیشن‌های مختلفی برای موبایل و دسکتاپ در صفحه فرود کارهایشان است که در اوایل قیف تبدیل به همه کاربران نشان داده می‌شود. با انیمیشن های اسکرول محور، آنها توانستند این پیاده سازی های جاوا اسکریپت سفارشی را با CSS جایگزین کنند تا به همان اثر دست یابند.

موارد استفاده کنید

گالری عکس با Image Reveal (برای موبایل) و Cover Flow (برای دسکتاپ).

کد (موبایل)

در مثال قبلی، Tokopedia از جدول زمانی پیشرفت پیمایش ناشناس استفاده کرد. در کد زیر، redBus از جدول زمانی پیشرفت view با نام استفاده می‌کند. انیمیشن opacity و clip-path عنصر <img> را در 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 برای سفرهای کاربر بیشتر استفاده کنیم.- آمیت کومار ، مدیر ارشد مهندسی، redBus .

بازار سیاست

مقایسه طرح های بیمه یک اقدام کلیدی مکرر است که توسط کاربران برای هدایت فرآیند تصمیم گیری آنها انجام می شود. با استفاده از انیمیشن های اسکرول محور، Policybazaar اندازه عناصر با اولویت پایین را در پاسخ به کاربر که جدول را پیمایش می کرد، کاهش داد. این منجر به یک تجربه پیمایش زیبا و در عین حال بهبود خوانایی شد.

با انیمیشن‌های پیمایشی، می‌توانستیم فضای درگاه دید را برای مقایسه برنامه‌ها برای کاربر به حداکثر برسانیم، و از تجربه خواندن متمرکز و بدون درهم‌تنگی اطمینان حاصل کنیم.— Rishabh Mehrotra ، رئیس بخش طراحی بیمه عمر BU، PolicyBazaar .

کد

مشابه مثال قبلی از Tokopedia، Policybazaar از تابع scroll() برای تنظیم جدول زمانی پیشرفت اسکرول ناشناس برای کنترل پیشرفت انیمیشن CSS استفاده می کند. در این حالت، اندازه فونت کوچک می شود و هدر بر اساس موقعیت اسکرول در 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 (صفحه اصلی)

Policybazaar (صفحه فهرست محصولات)

توکوپدیا (صفحه جزئیات محصول)

مواردی که باید هنگام استفاده از Scroll-driven Animations API در نظر بگیرید

این امکان وجود دارد که انیمیشن های اسکرول محور را برای مرورگرهایی که پشتیبانی نمی کنند، به عنوان مثال با Scroll-timeline polyfill پر کنید. اگر این کار را انجام دهید، به آزمایش بیشتری نیاز دارد تا مطمئن شوید که در کنار چارچوب شما به خوبی کار می‌کند، و مرورگرهایی که از polyfill استفاده می‌کنند با شکست انیمیشن یا تجربه‌های ناهنجار مواجه نمی‌شوند.

از CSS می‌توانید از @supports برای تست پشتیبانی از انیمیشن-زمان‌لاین قبل از استفاده از انیمیشن‌های اسکرول‌مدار استفاده کنید. مثلا:

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

}

منابع

• دموی انیمیشن های اسکرول محور
• با انیمیشن های اسکرول محور عناصر را روی اسکرول متحرک کنید
• Codelab: شروع به کار با انیمیشن های اسکرول در CSS
• برنامه افزودنی کروم: اشکال‌زدای انیمیشن مبتنی بر اسکرول
• Scroll-timeline Polyfill
• آیا می خواهید یک اشکال یا ویژگی جدید را گزارش کنید؟ ما می خواهیم از تو بشنویم !

سایر مقالات این مجموعه را بررسی کنید که در مورد چگونگی بهره مندی شرکت های تجارت الکترونیک از استفاده از ویژگی های جدید CSS و UI مانند View Transitions، Popover، Container Queries و has() Selector صحبت می کند.

• چرا قابلیت های رابط کاربری وب برای سایت تجارت الکترونیک شما اهمیت دارد؟
• مشاهده مطالعات موردی Transitions
• مطالعات موردی Popover API
• مطالعات موردی Queries Container
• :has() مطالعات موردی انتخابگر