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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

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 (لأجهزة الكمبيوتر المكتبي)

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

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

يسرّنا جدًا توفير هذه الميزة التي تجمع بين الأداء المتميّز وتجربة أفضل، ما يعزّز إشارات تجربة الصفحة لتحسين محركات البحث. بالإضافة إلى ذلك، يُعدّ من الضروري استخدام هذه الميزة في كل موقع إلكتروني يبيع منتجات من خلال التجارة الإلكترونية، وذلك بسبب الحد الأدنى من منحنى التعلّم. لقد تلقّينا أيضًا ملاحظات إيجابية ودعمًا من فِرق أخرى للاستفادة من تحليلات بيانات المستخدمين لتحسين المزيد من تجارب المستخدمين.— أميت كومار، مدير هندسي أول، شركة redBus

Policybazaar

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

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

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

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

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

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

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

}

الموارد

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

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

• ما أهمية إمكانات واجهة المستخدم على الويب لموقعك الإلكتروني للتجارة الإلكترونية؟
• الاطّلاع على دراسات حالة حول "عمليات النقل"
• دراسات حالة حول واجهة برمجة التطبيقات Popup API
• دراسات حالة طلبات الحِزم
• دراسات حالة عن أداة الاختيار ‎:has()‎