دراسات حالة حول الرسوم المتحركة التي تعتمد على التمرير

Swetha Gopalakrishnan

Saurabh Rajpal

الصور المتحركة المستندة إلى التمرير هي أنماط تجربة مستخدم شائعة على الويب. نموذج يستنِد إلى التمرير الحركة مرتبطة بموضع التمرير لحاوية التمرير. يعني ذلك أنه أثناء التمرير لأعلى أو لأسفل، تظهر الرسوم المتحركة المرتبطة للأمام أو الخلف في الاستجابة المباشرة. تشمل الأمثلة على ذلك تأثيرات، مثل الخلفية المتباينة. الصور أو مؤشرات القراءة التي تتحرك أثناء التمرير.

ينشئ المطوّرون عادةً صورًا متحركة تعتمد على التمرير باستخدام JavaScript للرد على أحداث التمرير في سلسلة المحادثات الرئيسية. هذا يجعل من الصعب إنشاء هي رسوم متحركة عالية الأداء تعتمد على التمرير ومتزامنة مع التمرير، بسبب ويتم تقديم أحداث التمرير بشكل غير متزامن، وغالبًا ما يؤدي إلى إيقاف مؤقت بسبب في سلسلة التعليمات الرئيسية.

ومع ذلك، وفي إطار نهجنا الوصول إلى ميزات CSS وواجهة المستخدم في المتصفّحات يمكنك الآن إنشاء رسوم متحركة تعريفية تعتمد على التمرير. مع التمرير في المخطط الزمني والعرض الجداول الزمنية، والمفاهيم الجديدة التي تتكامل مع Web Animations API (WAAPI) و CSS Animations API، يمكنك الآن الحصول على مزيج ناعم حريري الرسوم المتحركة القائمة على التمرير والتي تعمل خارج سلسلة التعليمات الرئيسية، مع بضعة أسطر فقط من الرمز. في دراسة الحالة هذه، اكتشف كيف يمكن استخدام Tokopedia وredBus وPolicybazaar. يستفيد بالفعل من هذه الميزة الجديدة.

Tokopedia

استبدلت شركة Tokopedia عمليات تنفيذ JavaScript المخصّصة السابقة بها الصور المتحركة المستندة إلى التمرير لتحسين أداء الصفحات وتعزيز تجربة التصفّح بشكل عام عبر مسار الإحالة الناجحة للتجارة الإلكترونية

تمكنا من تقليل ما يصل إلى 80٪ من سطور التعليمات البرمجية مقارنة باستخدام أحداث التمرير التقليدي بلغة JavaScript ولاحظنا أنّ متوسط استخدام وحدة المعالجة المركزية (CPU) من 50% إلى 2% أثناء الانتقال للأسفل أو للأعلى، آندي ويهاليم، كبير مهندسي البرامج في 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 صور متحركة مختلفة للأجهزة الجوّالة وأجهزة سطح المكتب على things-to-do، والتي تظهر في بداية مسار الإحالة الناجحة لجميع المستخدمين باستخدام الرسوم المتحركة القائمة على التمرير، استبدال عمليات تنفيذ JavaScript المخصّصة هذه بـ 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 حجم العناصر ذات الأولوية المنخفضة استجابةً لتمرير المستخدم في الجدول. هذا النمط إلى توفير تجربة تمرير سلسة مع تحسين إمكانية القراءة.

باستخدام الرسوم المتحركة القائمة على التمرير، تمكنا من زيادة مساحة إطار العرض المستخدم لمقارنة الخطط، مما يضمن قراءة مركزة وخالية من الفوضى الخبرة.—ريشابه ميهروترا، رئيسة Design for Life Insurance 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 (الصفحة الرئيسية)

بازار السياسة (صفحة بيانات المنتجات)

Tokopedia (صفحة تفاصيل المنتج)

أمور يجب مراعاتها عند استخدام Scroll-based Animations API

من الممكن تعويض الرسوم المتحركة القائمة على التمرير للمتصفحات غير المتوافقة، على سبيل المثال مع تعويض المخطط الزمني للتمرير. إذا قمت بذلك، فسيؤدي ذلك اختبارات إضافية للتأكد من أنها تعمل بشكل جيد مع وأن المتصفحات التي تستخدم الرمز polyfill لا تعرض صورًا متحركة بالفشل أو التجارب السيئة.

من CSS، يمكنك استخدام @supports لاختبار توافق المخطط الزمني للصور المتحركة. قبل استخدام الرسوم المتحركة القائمة على التمرير. على سبيل المثال:

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

}

الموارد

• عروض توضيحية للصور المتحركة التي تعتمد على التمرير
• تحريك العناصر عند التمرير باستخدام الصور المتحركة المستندة إلى الانتقال
• درس تطبيقي حول الترميز: بدء استخدام الصور المتحركة من خلال التمرير في CSS
• إضافة Chrome: أداة تصحيح أخطاء الصور المتحركة من خلال التمرير
• ملء المخطط الزمني للانتقال
• هل تريد الإبلاغ عن خطأ أو ميزة جديدة؟ تسرّنا معرفة رأيك.

اطّلِع على المقالات الأخرى في هذه السلسلة التي تتناول كيفية استفادة شركات التجارة الإلكترونية من استخدام ميزات CSS وواجهة المستخدم الجديدة، مثل "عرض انتقالات" و"النافذة المنبثقة" و"طلبات البحث في الحاوية" وأداة اختيار has().

• ما سبب أهمية إمكانات واجهة مستخدم الويب بالنسبة إلى موقع التجارة الإلكترونية الخاص بك؟
• الاطّلاع على دراسات حالة حول عمليات النقل
• دراسات حالة حول Popover API
• دراسات حالة حول طلبات البحث في الحاويات
• :has() أداة اختيار دراسات الحالة