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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

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

توافق المتصفّح

  • Chrome: 115.
  • الحافة: 115.
  • متصفّح Firefox: خلف علم
  • Safari: غير متوافق

المصدر

Tokopedia

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

لقد نجحنا في تقليل ما يصل إلى% 80 من أسطر الرمز البرمجي مقارنةً باستخدام أحداث الانتقال باستخدام JavaScript التقليدية، ولاحظنا أنّ متوسط استخدام وحدة المعالجة المركزية انخفض من% 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 صورًا متحركة مختلفة للأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي على صفحتها المقصودة نشاطات مقترَحة، والتي تظهر أبكر ما يمكن في مسار الإحالة الناجحة لجميع المستخدمين. باستخدام الرسومات المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل، تمكّنوا من استبدال عمليات تنفيذ JavaScript المخصّصة هذه بخدمة CSS لتحقيق التأثير نفسه.

حالات الاستخدام

معرض الصور مع ميزة Image Reveal (للأجهزة المتحرّكة) وميزة Cover Flow (لأجهزة الكمبيوتر المكتبي)

تأثير عرض الصورة المتحرك المستنِد إلى الانتقال للأعلى أو للأسفل لتحميل الصور في معرض الصور "نشاطات مقترَحة" في redBus.

الرمز (الأجهزة الجوّالة)

في المثال السابق، استخدمت 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

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

من خلال الرسوم المتحركة المستندة إلى الانتقال للأعلى أو للأسفل، تمكّنا من زيادة مساحة مساحة العرض إلى أقصى حدّ ليتمكن العميل من مقارنة الخطط، ما يضمن تجربة قراءة هادفة وخالية من الفوضى.—ريشاب مهروترا، رئيس قسم التصميم في وحدة تأمينات الحياة، PolicyBazaar

صورة متحركة تعمل بالتمرير animate-timeline على جدول خطة المقارنة في مجال الاستثمار والحياة (خط النشاط التجاري).

الرمز

على غرار المثال السابق من 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 (الصفحة الرئيسية)

تأثير الانتقال السريع للصور المتحركة التي تعتمد على التمرير لتحميل بطاقات المنتجات على الصفحة المقصودة "Things To Do" في redBus.

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

رسم متحرك يستند إلى التمرير يتلاشى تدريجيًا في بطاقات المنتجات ضمن قسم "الاستثمار والحياة" (نوع النشاط التجاري).

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

صورة متحركة للظهور والتلاشي أثناء الانتقال بين المنتجات المدرَجة

نقاط يجب مراعاتها عند استخدام واجهة برمجة التطبيقات Scroll-driven Animations API

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

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

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

}

الموارد

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