سنطرح قريبًا صورًا متحركة يتم تشغيلها عند التمرير للأعلى أو للأسفل في CSS.

Bramus

تاريخ النشر: 12 ديسمبر 2025

في عام 2023، أطلقنا الصور المتحركة المستندة إلى التمرير التي تتيح لك تقديم صورة متحركة (أو ترجيعها) من خلال التمرير. باستخدام الرسوم المتحركة المستندة إلى التمرير، يتقدّم مستوى تقدّم الرسوم المتحركة من% 0 إلى% 100 أثناء التمرير. إذا توقّفت عن التمرير، سيتم إيقاف الصورة المتحركة مؤقتًا، وإذا مرّرت للأعلى، سيتم عكس اتجاه الصورة المتحركة.

سيتم إطلاق الفصل التالي من الرسوم المتحركة المستندة إلى التمرير في عام 2026، وسيتم إطلاق الرسوم المتحركة التي يتم تشغيلها عند التمرير في الإصدار 145 من Chrome. وهي رسوم متحركة مستندة إلى الوقت يتم تفعيلها عند تجاوز إزاحة تمرير محددة.

يمكنك الآن إنشاء هذا النوع من التأثيرات بشكل تعريفي في CSS، ما يعني أنّك لن تحتاج إلى استخدام IntersectionObserver بعد الآن.

مشغّلات المخطط الزمني ومشغّلات الصور المتحركة والإجراءات

تشغيل صورة متحركة

لإعداد حركة يتم تنشيطها عند التمرير في CSS، ابدأ بحركة CSS عادية مرتبطة بعنصر:

animation: unclip 0.35s ease-in-out both;

تستخدِم حركة الدخول هذه DocumentTimeline كمشغّل وتستمر لمدة 0.35 ثانية. يتم تشغيل الرسوم المتحركة تلقائيًا بعد تحميل الصفحة. لتغيير المشغّل، استخدِم خاصية CSS الجديدة animation-trigger:

animation-trigger: --t play-forwards play-backwards;

في هذا المثال، تم ضبط الصورة المتحركة ليتم تشغيلها بواسطة المشغّل --t. عند تفعيل هذا المشغّل، يتم استدعاء الإجراء play-forwards على الحركة، وعند إيقاف المشغّل، يتم استدعاء الإجراء play-backwards.

تحتوي المواصفات على القائمة الكاملة للإجراءات.

إنشاء مشغِّل

ولكن ما هو --t المشغّل؟ هذا مشغّل بالاسم --t. بالنسبة إلى الحركات التي يتم تشغيلها عند التمرير تحديدًا، يكون ذلك "مشغّلاً للمخطط الزمني" يستخدم مخططًا زمنيًا لتقدّم التمرير أو مخططًا زمنيًا لتقدّم العرض كمصدر له.

لتحديد مشغّل المخطط الزمني، استخدِم السمة timeline-trigger (أو الصيغ الطويلة المرتبطة بها). على سبيل المثال، لإنشاء مشغّل باسم --t يستخدم مخططًا زمنيًا للعرض كمصدر له، استخدِم ما يلي:

timeline-trigger-name: --t;
timeline-trigger-source: view();

يتم تفعيل وإيقاف المشغّل الذي تم إنشاؤه --t استنادًا إلى المخطط الزمني للعرض المرتبط بالعنصر المطابق. بما أنّ النطاق التلقائي لمخطط زمني للعرض هو النطاق cover، يتم أيضًا تفعيل المشغّل وإيقافه عند الدخول إلى هذا النطاق أو الخروج منه.

تعديل نطاقات عبارة التشغيل

لتعديل المواضع التي يجب أن يكون فيها المشغّل نشطًا أو غير نشط، حدِّد نطاقَي التفعيل والنشاط في المشغّل. في المثال التالي، تم ضبط نطاق التفعيل على entry 100% exit 0%، ما يعني أنّه سيتم تفعيل المشغّل عندما يكون العنصر ضمن هذا النطاق.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

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

عند الجمع بين animation-trigger المحدّدة سابقًا، يؤدي ذلك بصريًا إلى تشغيل الحركة للأمام عندما يدخل العنصر بالكامل إلى منفذ العرض، وتشغيل الحركة للخلف عندما يكون على وشك مغادرة منفذ العرض.

من الممكن أن تكون هناك نطاقات تفعيل ونطاقات نشطة مختلفة. على سبيل المثال:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

في هذه الحالة، يتم تفعيل المشغّل عندما يكون الموضوع ضمن النطاق entry 100% exit 0%. يظل المشغّل نشطًا إلى أن يخرج من نطاق entry 0% exit 100%.

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

تحديد نطاق مشغّل

تكون المشغّلات مرئية على مستوى العالم، ما يعني أنّ آخر تطابق يعلن عن مشغّل باسم معيّن هو "الفائز". لتقييد مستوى رؤية مشغّل، استخدِم السمة trigger-scope. وهذا يشبه طريقة استخدام anchor-scope.

trigger-scope: --t; /* List of dashed idents, or `all` */

عندما تكون لديك قاعدة CSS تحدّد مشغّلاً وتتطابق مع عناصر متعدّدة، عليك استخدام trigger-scope.

عرض توضيحي

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

في ما يلي منطق الصور المتحركة التي يتم تشغيلها عند التمرير:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

بعد تحليل الرمز، يصبح على النحو التالي:

• يُطلق على السمة timeline-trigger الاسم --t ويتم ضبط مصدرها على مخطط زمني للعرض يتتبّع العنصر المطابق.
• نطاق التفعيل للمشغّل هو contain 15% contain 85%. وعندما يكون الموضوع ضمن هذا النطاق، يصبح المشغّل نشطًا.
• عند تفعيلها، يبقى المشغّل نشطًا طالما كان العنصر في النطاق النشط لجهاز entry 100% exit 0%.
• تم إرفاق الحركة unclip بالعنصر.
• تم ضبط الصورة المتحركة لاستخدام --t كمصدر مشغّل. عندما يصبح المشغّل نشطًا، تبدأ الحركة في التشغيل في اتجاه للأمام.
• عند إيقاف المشغّل، أي عندما يغادر الهدف المُراد تصويره النطاق النشط، يتم تشغيل الصورة المتحرّكة بشكل عكسي.
• يتم أيضًا تحريك محتوى البطاقة للداخل والخارج باستخدام المشغّل نفسه --t.

يتضمّن المثال عنصرًا احتياطيًا باستخدام IntersectionObserver للمتصفّحات التي لا تتوافق مع timeline-trigger.

المزيد من العروض التوضيحية

إذا كنت من محبّي الرسوم المتحركة التي يتم تشغيلها عند التمرير، يمكنك الاطّلاع على العروض التوضيحية التالية:

• النص المتحرّك
• التعرّف على الوحوش (التمرير للأسفل)
• الشكل المتغيّر

الملاحظات

نحن مهتمّون بتلقّي ملاحظاتك لمواصلة تحسين هذه الميزة. يمكنك التواصل معنا على وسائل التواصل الاجتماعي أو تقديم بلاغ عن مشكلة في مجموعة عمل CSS لترك ملاحظاتك.

إذا واجهت خطأً، يُرجى إرسال تقرير عن خلل Chromium لإعلامنا بذلك. قائمة بالأخطاء المعروفة: يُرجى الاطّلاع على أداة تتبُّع الأخطاء في Chromium.