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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

ومع ذلك، كجزء من ميزات CSS وواجهة المستخدم الجديدة التي تظهر في المتصفّحات، يمكنك الآن إنشاء صور متحركة مستندة إلى الانتقالات. فباستخدام ميزة Scroll "المخطّطات الزمنية" و"View Timelines" التي تشمل مفاهيم جديدة تتكامل مع 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 صور متحركة مختلفة للأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي على الصفحة المقصودة للمهام المقترحة، والتي تظهر في وقت مبكر من مسار الإحالة الناجحة لجميع المستخدمين. باستخدام الرسومات المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل، تمكّنوا من استبدال عمليات تنفيذ 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-based Animations API

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

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

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

}

الموارد

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

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

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