إنشاء تأثيرات شرائح لوحة العرض الدوّارة

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

كيفية الإعداد

في ما يلي كيفية إنشاء تأثيرات شرائح العرض الدوّار:

1. إنشاء شريط تمرير: سيكون هذا العنصر بمثابة حاوية لشرائح لوحة العرض الدوّارة. في هذا المثال، يتم استخدام overflow-x: scroll للسماح بالتمرير الأفقي.

   <ul class="scroller">
     <li class="entry">1</li>
     <li class="entry">2</li>
     <li class="entry">3</li>
     …
   </ul>
   

   .scroller {
     overflow-x: scroll;
   }
   

2. تحديد الحركة: أنشِئ حركة CSS تحدّد الحالات المختلفة للشرائح أثناء انتقالها في نافذة التمرير. يمكنك تحديد الإطارات الرئيسية لأي جزء من الحركة. على سبيل المثال، يمكنك تحديد حالة عندما تكون الشرائح في منتصف منفذ الانتقال من خلال تضمين إطار مفتاحي 50%. في هذا المثال، تجعل السمة scale الشرائح تكبر عند اقترابها من المركز وتتقلّص عند ابتعادها عنه.

   @keyframes animate {
     0% {
       scale: 0.5;
     }
     50% {
       scale: 1;
     }
     100% {
       scale: 0.5;
     }
   }
   

3. تطبيق الحركة وview-timeline: يمكنك إرفاق الحركة بشرائح لوحة العرض الدوّارة وربطها بـ view-timeline يتتبّع العنصر أثناء الانتقال في الحاوية.

   .scroller > * {
     animation: animate auto linear both;
     animation-timeline: view(inline);
   }
   

   يتتبّع view() تلقائيًا العنصر على المحور block. إذا كنت بحاجة إلى تتبُّعها على المحور inline، يمكنك استخدام view(inline).

مثال على الرمز

تُحرّك هذه التعليمة البرمجية عناصر لوحة العرض الدوّارة لشريط تمرير أفقي عند التمرير باستخدام مخطط زمني مجهول للعرض:

@keyframes animate {
  0% {
    scale: 0.5;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: 0.5;
  }
}

.scroller > * {
  /* Applies the animation using an `auto` duration */
  animation: animate auto linear both;
  /* Sets the animation timeline to use an anonymous view progress timeline, tracking the element's progress through the scroller on the inline axis */
  animation-timeline: view(inline);
}

تُحرِّك هذه التعليمة البرمجية عناصر لوحة العرض الدوّارة في شريط تمرير أفقي عند التمرير باستخدام مخطط زمني للعرض باسم:

@keyframes animate {
  0% {
    scale: 0.5;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: 0.5;
  }
}

/* This creates a named view-timeline on each carousel item. The timeline is used to drive the animation that is applied on the same element. */
.scroller > * {
  /* Applies the animation using an `auto` duration */
  animation: animate auto linear both;
  /* Defines a named view progress timeline, tracking the element's progress through the scroller on the inline axis */
  view-timeline: --item inline;
  /* Sets the animation timeline to use the named view progress timeline defined above */
  animation-timeline: --item;
}

أفضل الممارسات

عند استخدام الصور المتحركة المستندة إلى الانتقال، من المهم اتّباع بعض أفضل الممارسات لضمان تجربة سلسة وسهلة الاستخدام:

• يجب تضمين ميزة رصد الميزات: لا تتيح بعض المتصفّحات استخدام الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل. استخدِم @supports ((animation-timeline: view()) and (animation-range: entry)) للتحقّق من توفّر الدعم وتوفير خيار احتياطي للمتصفّحات التي لا تتيح هذه الميزة.
  • يجب تضمين عملية التحقّق من (animation-range: entry) هنا لفلترة المتصفّحات التي توفّر دعمًا جزئيًا فقط.
  • لا تستخدِم حزمة scroll-timeline-polyfill لاستراتيجية الاحتياط لأنّها لا تتضمّن جميع الميزات وتحتوي على الكثير من المشاكل المعروفة.
  • إذا كانت الحركة تُعتبر زخرفية فقط، فاختَر "التحسين التدريجي" ولا تقدّم بديلاً.
• يجب احترام الإعدادات المفضّلة للمستخدمين: يفضّل بعض المستخدمين تقليل الحركة على الويب. استخدِم الاستعلام عن الوسائط prefers-reduced-motion لإيقاف الصور المتحركة أو تقليلها لهؤلاء المستخدمين.
• يُرجى محاولة تحريك خصائص CSS ذات الأداء العالي فقط: للحصول على صور متحركة أكثر سلاسة، التزِم بتحريك الخصائص التي يمكن معالجتها من خلال سلسلة عمليات التجميع في المتصفّح، مثل transform وopacity. قد تؤدي إضافة تأثيرات حركية إلى سمات أخرى، مثل width أو height، إلى حدوث مشاكل في الأداء.
• يجب استخدام ترتيب التعريف الصحيح: عند استخدام السمة المختصرة animation، يجب تعريف animation-timeline وanimation-range بعدها لمنع السمة المختصرة من إعادة ضبط المخطط الزمني.

يُفضَّل استخدام view-timeline محدّد عندما تحتاج عناصر DOM متعددة إلى التحريك استنادًا إلى المخطط الزمني نفسه، أو عندما تحتاج إلى تحريك العناصر الفرعية للعنصر الذي تم تحديد view-timeline عليه. إذا كان العنصر الذي تريد تحريكه هو أيضًا العنصر الذي يحدّد view-timeline، يمكنك استخدام مخطط زمني مجهول الهوية باستخدام view().

عند استخدام الدالة view() لإنشاء تأثير حركي مستند إلى الانتقال:

• اختياري: حدِّد المحور الذي تريد تتبُّعه: عندما لا تستهدف المحور التلقائي block (كما هو الحال في شريط التمرير الأفقي)، حدِّد المحور الذي تريد تتبُّعه باستخدام view(block) أو view(inline).

عند استخدام السمة view-timeline لإنشاء صورة متحركة مستندة إلى الانتقال للأعلى أو للأسفل:

• يجب استخدام <dashed-ident> لخدمة مقارنة الأسعار (CSS) في الاسم (مثلاً: view-timeline: --my-custom-name)
• اختياري تحديد المحور الذي تريد تتبُّعه: في حال عدم استهداف محور block التلقائي (مثلاً في شريط تمرير أفقي)، حدِّد المحور الذي تريد تتبُّعه باستخدام view-timeline-axis.
• يجب التأكّد من أنّ نطاق البحث يعمل: عندما لا يكون العنصر الذي يعرّف view-timeline عنصرًا رئيسيًا في الشجرة المسطّحة للعنصر المتحرّك، يمكنك رفع مستوى ظهور اسم view-timeline باستخدام timeline-scope على عنصر رئيسي مشترك.

توافق المتصفّح واستراتيجيات الاحتياط

لذلك، عادةً ما تكون هناك حاجة إلى استراتيجية احتياطية.

بالنسبة إلى المتصفّحات التي لا تتيح استخدام الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل، يمكنك استخدام خيار احتياطي لإعادة إنشاء التأثيرات المرئية. يتم عادةً إنشاء الإجراءات الاحتياطية باستخدام أداة استماع للتمرير (لتأثيرات ScrollTimeline) أو واجهة برمجة التطبيقات IntersectionObserver (لتأثيرات ViewTimeline).

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

يُرجى العِلم أنّه لا يمكن إعادة إنشاء كل تأثير باستخدام نهج الإجراءات الاحتياطية.

بالنسبة إلى حالة الاستخدام هذه تحديدًا، يطبّق النص البرمجي التالي الإجراء الاحتياطي للمتصفّحات التي لا تتيح استخدام الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل. وتستخدم واجهة برمجة التطبيقات Web Animations API‏ (Element.animate()) لإنشاء صورة متحركة متوقفة مؤقتًا لكل عنصر في لوحة العرض الدوّارة. بعد ذلك، يستمع إلى حدث scroll على شريط التمرير ويعدّل currentTime لكلّ حركة استنادًا إلى مستوى تقدّم الانتقال للعنصر داخل شريط التمرير.

// Fallback for browsers that don't support scroll-driven animations
if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
  const scroller = document.querySelector('.scroller');
  const entries = document.querySelectorAll('.entry');

  // Create a map to store animations
  const animations = new Map();

  entries.forEach(entry => {
    const animation = entry.animate(
      {
        scale: ['0.5', '1', '0.5']
      },
      {
        duration: 1, // We'll control the time ourselves
        fill: 'both'
      }
    );
    animation.pause();
    animations.set(entry, animation);
  });

  // Update animations on scroll
  const tick = () => {
    const scrollerRect = scroller.getBoundingClientRect();

    entries.forEach(entry => {
      const animation = animations.get(entry);
      if (!animation) return;

      const entryRect = entry.getBoundingClientRect();
      const progress = (entryRect.left + entryRect.width / 2 - scrollerRect.left) / scrollerRect.width;

      animation.currentTime = progress;
    });
  };
    
  scroller.addEventListener('scroll', tick);
  tick();
}