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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

توکوپدیا

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

ما موفق شدیم تا ۸۰٪ از خطوط کد خود را در مقایسه با استفاده از رویدادهای اسکرول مرسوم جاوا اسکریپت کاهش دهیم و مشاهده کردیم که میانگین استفاده از CPU هنگام اسکرول از ۵۰٪ به ۲٪ کاهش یافته است . — اندی ویهالیم ، مهندس ارشد نرم‌افزار، توکوپدیا

کد

پیاده‌سازی زیر از تابع 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 در صفحه فرود «کارهای انجام‌شده» خود، انیمیشن‌های متفاوتی برای موبایل و دسکتاپ دارد که در اوایل قیف تبدیل به همه کاربران نشان داده می‌شود. با انیمیشن‌های اسکرول‌محور، آنها توانستند این پیاده‌سازی‌های سفارشی جاوا اسکریپت را با CSS جایگزین کنند تا به همان نتیجه برسند.

موارد استفاده

گالری عکس با نمایش تصویر (برای موبایل) و نمایش جلد (برای دسکتاپ).

کد (موبایل)

در مثال قبلی، Tokopedia از جدول زمانی پیشرفت پیمایش ناشناس استفاده کرد. در کد زیر، redBus از جدول زمانی پیشرفت نمای نامگذاری شده استفاده می‌کند. انیمیشن، میزان 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%;
   }
`;

ما از دیدن این ویژگی بسیار خوشحالیم زیرا ترکیبی بی‌نظیر از عملکرد با تجربه بهتر است و سیگنال‌های تجربه صفحه ما را برای سئو تقویت می‌کند. علاوه بر این، منحنی یادگیری حداقلی آن را برای هر وب‌سایت تجارت الکترونیک ضروری می‌کند. ما همچنین بازخورد مثبت و پشتیبانی از تیم‌های دیگر را برای استفاده از SDA برای سفرهای بیشتر کاربر دریافت کردیم . — آمیت کومار ، مدیر ارشد مهندسی، redBus .

بازار سیاست

مقایسه طرح‌های بیمه یک اقدام کلیدی و مکرر است که توسط کاربران برای هدایت فرآیند تصمیم‌گیری آنها انجام می‌شود. با استفاده از انیمیشن‌های اسکرول محور، 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;
}

ردباس (صفحه اصلی)

بازار سیاست (صفحه فهرست محصولات)

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

مواردی که باید هنگام استفاده از API انیمیشن‌های اسکرول-رانده در نظر بگیرید

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

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

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

}

منابع

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

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

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