تحريك العناصر أثناء التمرير باستخدام الرسوم المتحركة المستندة إلى التمرير

تعرَّف على كيفية استخدام المخططات الزمنية للانتقالات والمخططات الزمنية للعرض لإنشاء صور متحركة مستندة إلى الانتقالات بطريقة تعريفية.

Bramus

تاريخ النشر: 5 أيار (مايو) 2023

الصور المتحركة التي يتم تشغيلها من خلال الانتقال للأعلى أو للأسفل

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

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

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

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

ويجعل ذلك من المستحيل أو من الصعب جدًا إنشاء صور متحركة عالية الأداء يتم عرضها أثناء الانتقال إلى الأسفل أو للأعلى.

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

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

ملخّص صغير عن الصور المتحركة على الويب

الصور المتحركة على الويب باستخدام CSS

لإنشاء حركة في CSS، حدِّد مجموعة من الإطارات الرئيسية باستخدام قاعدة at-rule‏ @keyframes. اربطها بعنصر باستخدام السمة animation-name مع ضبط animation-duration أيضًا لتحديد المدة التي يجب أن تستغرقها الحركة. تتوفّر المزيد من السمات الطويلة animation-*، مثل animation-easing-function وanimation-fill-mode على سبيل المثال لا الحصر، والتي يمكن دمجها جميعًا في الاختصار animation.

على سبيل المثال، إليك صورة متحركة تكبِّر عنصرًا على محور X مع تغيير لون خلفيته أيضًا:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

الصور المتحركة على الويب باستخدام JavaScript

في JavaScript، يمكن استخدام Web Animations API لتحقيق التأثير نفسه بالضبط. يمكنك إجراء ذلك إما عن طريق إنشاء مثيلَين جديدَين من Animation وKeyFrameEffect، أو استخدام الطريقة Element animate() الأقصر بكثير.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

هذه النتيجة المرئية لمقتطف JavaScript أعلاه متطابقة مع الإصدار السابق من CSS.

المخططات الزمنية للصور المتحركة

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

تحدِّد مواصفات الرسوم المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل نوعَين جديدَين من المخططات الزمنية يمكنك استخدامهما:

• مخطط زمني لتقدّم الانتقال للأسفل أو للأعلى: مخطط زمني مرتبط بموقع الانتقال للأسفل أو للأعلى لحاوية الانتقال للأسفل أو للأعلى على طول محور معيّن.
• عرض المخطط الزمني للتقدّم: مخطط زمني مرتبط بالموضع النسبي لعنصر معيّن داخل حاوية التمرير

الانتقال للأسفل أو للأعلى في مخطط التقدّم الزمني

مخطط "تقدّم الانتقال للأسفل أو للأعلى" هو مخطط زمني للحركة المتحركة مرتبط بتقدّم موضع الانتقال للأسفل أو للأعلى في حاوية الانتقال للأسفل أو للأعلى، والتي تُعرف أيضًا باسم scrollport أو scroller، على طول محور معيّن. تحوّل هذه الدالة موضعًا في نطاق التمرير إلى نسبة مئوية من مستوى التقدّم.

يمثّل موضع الانتقال إلى أعلى الصفحة من البداية نسبة تقدّم% 0، ويمثّل موضع الانتقال إلى أعلى الصفحة من النهاية نسبة تقدّم% 100. في الرسم البياني التالي، يمكنك ملاحظة أنّ مستوى التقدّم يرتفع من 0% إلى 100% أثناء التمرير من أعلى الشاشة إلى أسفلها.

✨ جرِّب هذه الميزة بنفسك

غالبًا ما يتم اختصار "مخطط زمني لتقدّم الانتقال للأسفل أو للأعلى" إلى "مخطط زمني للانتقال للأسفل أو للأعلى".

عرض المخطط الزمني للتقدّم

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

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

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

✨ جرِّب هذه الميزة بنفسك

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

الاستفادة من المخططات الزمنية لتقدّم الانتقال إلى الأسفل أو للأعلى

إنشاء مخطط زمني مجهول لتقدّم الانتقال في CSS

إنّ أسهل طريقة لإنشاء مخطط زمني للانتقال في CSS هي استخدام الدالة scroll(). يؤدّي ذلك إلى إنشاء مخطط زمني مجهول للتمرير يمكنك ضبطه كقيمة لسمة animation-timeline الجديدة.

مثال:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

تقبل الدالة scroll() وسيطتَي <scroller> و<axis>.

في ما يلي القيم المقبولة للوسيطة <scroller>:

• ‫nearest: يستخدم أقرب حاوية لعنصر التمرير في العنصر الرئيسي (الإعداد التلقائي).
• root: يستخدم إطار عرض المستند كمحاوية للانتقال.
• self: يستخدم العنصر نفسه كسلة لفائف.

في ما يلي القيم المقبولة للوسيطة <axis>:

• ‫block: يستخدم مقياس مستوى التقدّم على طول محور الكتلة لحاوية التمرير (الإعداد التلقائي).
• ‫inline: يستخدم مقياس التقدّم على طول المحور المضمّن لحاوية التمرير.
• y: يستخدم مقياس التقدّم على طول محور ص لحاوية التمرير.
• x: يستخدم مقياس مستوى التقدّم على طول محور x لحاوية الانتقال.

على سبيل المثال، لربط صورة متحركة بعنصر التمرير الرئيسي على محور الكتلة، تكون القيم المطلوب تمريرها إلى scroll() هي root وblock. وتكون القيمة الإجمالية scroll(root block).

عرض توضيحي: مؤشر مستوى تقدّم القراءة

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

✨ جرِّب هذه الميزة بنفسك

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

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

تم ضبط المخطط الزمني للحركة grow-progress في عنصر #progress على مخطط زمني مجهول تم إنشاؤه باستخدام scroll(). لا يتم تقديم أي وسيطات إلى scroll()، لذا ستتم الرجوع إلى قيمها التلقائية.

شريط التمرير التلقائي الذي يتم تتبُّعه هو nearest، ويكون محوره التلقائي هو block. يستهدف هذا الإجراء بفعالية شريط التمرير الجذر لأنّه أقرب شريط تمرير لعنصر #progress، مع تتبُّع اتجاه الحظر.

إنشاء مخطط زمني مُعنوَن لتقدّم الانتقال في CSS

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

لإنشاء مخطط زمني مُعنوَن لتقدّم الانتقال إلى أعلى أو أسفل الصفحة على عنصر، اضبط سمة scroll-timeline-name CSS على حاوية الانتقال إلى أعلى أو أسفل الصفحة على معرّف يناسبك. يجب أن تبدأ القيمة بـ --.

لتعديل المحور الذي تريد تتبُّعه، يجب أيضًا تحديد السمة scroll-timeline-axis. القيم المسموح بها هي نفسها وسيطة <axis> في دالة scroll().

أخيرًا، لربط الحركة بالجدول الزمني لتقدّم الانتقال، اضبط سمة animation-timeline على العنصر الذي يجب أن تظهر عليه الحركة على القيمة نفسها للمعرّف المستخدَم في scroll-timeline-name.

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

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

يمكنك دمج scroll-timeline-name وscroll-timeline-axis في الاختصار scroll-timeline إذا أردت. على سبيل المثال:

scroll-timeline: --my-scroller inline;

عرض توضيحي: مؤشر خطوة لوحة العرض الدوّارة الأفقية

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

✨ جرِّب هذه الميزة بنفسك

في ما يلي الترميز الأساسي للمعرض:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

يتم وضع العنصر .gallery__progress في موضع مطلق داخل العنصر المُغلف .gallery. يتم تحديد حجمها الأولي من خلال السمة المخصّصة --num-images.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

يعرض .gallery__scrollcontainer عناصر .gallery__entry المضمّنة أفقيًا، وهو العنصر الذي يتم التمرير فيه. من خلال تتبُّع موضع التمرير، يظهر الرمز .gallery__progress متحركًا. ويتم ذلك من خلال الإشارة إلى مخطط "مخطّط التقدّم في الانتقال للأعلى أو للأسفل" المُعنوَن --gallery__scrollcontainer.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

إنشاء مخطط زمني لتقدّم الانتقال باستخدام JavaScript

لإنشاء مخطط زمني للانتقال في JavaScript، أنشئ مثيلًا جديدًا لفئة ScrollTimeline. نقْل حقيبة موقع تتضمّن source وaxis اللذين تريد تتبُّعهم.

• ‫source: إشارة إلى العنصر الذي تريد تتبُّع شريط التمرير الخاص به. استخدِم document.documentElement لاستهداف شريط التمرير الجذر.
• ‫axis: لتحديد المحور الذي تريد تتبُّعه. على غرار متغير CSS، تكون القيم المقبولة هي block وinline وx وy.

const tl = new ScrollTimeline({
  source: document.documentElement,
});

لإرفاقها بحركة رسوم متحركة على الويب، يجب تمريرها على أنّها سمة timeline وحذف أيّ duration إذا كان هناك أيّ منها.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

عرض توضيحي: مؤشر مستوى التقدّم في القراءة، تم إعادة النظر فيه

لإعادة إنشاء مؤشر مستوى القراءة باستخدام JavaScript، مع استخدام الترميز نفسه، استخدِم رمز JavaScript التالي:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

تكون النتيجة المرئية متطابقة في إصدار CSS: يتتبّع timeline الذي تم إنشاؤه شريط التمرير الجذر ويوسّع #progress على محور x من ‎0% إلى ‎100% أثناء الانتقال إلى أعلى الصفحة.

✨ جرِّب هذه الميزة بنفسك

الاستفادة من ميزة "عرض المخطط الزمني للتقدّم"

إنشاء مخطط زمني لتقدّم العرض المجهول الهوية في CSS

لإنشاء مخطط زمني لعرض مستوى التقدّم، استخدِم الدالة view(). وسيطاتها المقبولة هي <axis> و<view-timeline-inset>.

• العنصر <axis> هو نفسه العنصر المستخدَم في مخطط "تقدّم الانتقال للأسفل أو للأعلى"، ويحدّد المحور الذي تريد تتبُّعه. تكون القيمة التلقائية block.
• باستخدام <view-timeline-inset>، يمكنك تحديد قيمة تعويض (موجبة أو سالبة) لتعديل الحدود عندما يكون العنصر مرئيًا أو غير مرئي. يجب أن تكون القيمة نسبة مئوية أو auto، مع الأخذ في الاعتبار أنّ auto هي القيمة التلقائية.

على سبيل المثال، لربط صورة متحركة بعنصر يتقاطع مع شريط التمرير الخاص به على محور الكتلة، استخدِم view(block). على غرار scroll()، اضبط هذه القيمة على السمة animation-timeline ولا تنسَ ضبط animation-duration على auto.

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

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

فاصل: عرض نطاقات المخطط الزمني

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

من الممكن أيضًا ربطه بجزء معيّن من "مخطط العرض الزمني" من خلال تحديد النطاق الذي يجب إرفاقه به. على سبيل المثال، يمكن أن يحدث ذلك فقط عندما يدخل الهدف إلى شريط التمرير. في الرسم البياني التالي، يبدأ مستوى التقدّم بالارتفاع من 0% عندما يدخل الجسم إلى حاوية التمرير، ولكنه يصل إلى 100% من لحظة تداخله بالكامل.

في ما يلي نطاقات "عرض المخطط الزمني" المحتمَلة التي يمكنك استهدافها:

• cover: يمثّل النطاق الكامل للمخطط الزمني لتقدّم العرض.
• entry: يمثّل النطاق الذي يدخل فيه المربّع الرئيسي نطاق ظهور مستوى تقدّم العرض.
• exit: يمثّل النطاق الذي يخرج فيه المربّع الرئيسي من نطاق مستوى ظهور عرض التقدّم.
• entry-crossing: يمثّل النطاق الذي يعبر فيه المربّع الرئيسي حافة الحدّ النهائي.
• exit-crossing: يمثّل النطاق الذي يعبر فيه المربّع الرئيسي حافة حدود البداية.
• contain: يمثّل النطاق الذي يكون فيه المربّع الرئيسي مضمّنًا بالكامل في نطاق ظهور مستوى تقدّم العرض أو يغطّيه بالكامل ضمن مساحة التمرير. يعتمد ذلك على ما إذا كان الهدف أطول أو أقصر من شريط التمرير.

لتحديد نطاق، يجب ضبط بداية النطاق ونهايته. يتكوّن كلّ منها من اسم النطاق (راجِع القائمة أعلاه) وعنصر "إزاحة النطاق" لتحديد الموضع ضمن اسم النطاق هذا. عادةً ما يكون موضع البداية للنطاق نسبة مئوية تتراوح بين 0% و100%، ولكن يمكنك أيضًا تحديد طول ثابت مثل 20em.

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

في CSS، يمكنك ضبط ذلك باستخدام السمة animation-range. مثال:

animation-range: entry 0% entry 100%;

في JavaScript، استخدِم السمتَين rangeStart وrangeEnd.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

استخدِم الأداة المضمّنة أدناه لمعرفة ما يمثّله كل اسم نطاق وكيفية تأثير النِسب المئوية في موضعَي البداية والنهاية. حاوِل ضبط بداية النطاق على entry 0% ونهاية النطاق على cover 50%، ثم اسحب شريط التمرير للاطّلاع على نتيجة الحركة.

مشاهدة تسجيل

كما قد تلاحظ أثناء استخدام أدوات "عرض نطاقات المخطط الزمني" هذه، يمكن استهداف بعض النطاقات من خلال مجموعتَين مختلفتَين من اسم النطاق + إزاحة النطاق. على سبيل المثال، تستهدف كلّ من entry 0% وentry-crossing 0% وcover 0% المنطقة نفسها.

عندما تستهدف بداية النطاق ونهايته اسم النطاق نفسه وتغطي النطاق بأكمله، من 0% إلى 100%، يمكنك تقصير القيمة إلى اسم النطاق فقط. على سبيل المثال، يمكن إعادة كتابة animation-range: entry 0% entry 100%; إلى animation-range: entry الأقصر بكثير.

عرض توضيحي: إظهار الصورة

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

✨ جرِّب هذه الميزة بنفسك

يتم تحقيق تأثير التوسيع باستخدام مسار مقطع متحرك. في ما يلي رمز CSS المستخدَم لهذا التأثير:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

إنشاء مخطط زمني مُعنوَن لتقدّم العرض في CSS

على غرار الجداول الزمنية للانتقال إلى أعلى أو أسفل الصفحة التي تتضمّن نُسخًا مُسمّاة، يمكنك أيضًا إنشاء جداول زمنية مُسمّاة للاطّلاع على البيانات. بدلاً من استخدام سمات scroll-timeline-*، استخدِم الأسعار المتغيرة التي تحمل البادئة view-timeline-، أي view-timeline-name وview-timeline-axis.

وينطبق النوع نفسه من القيم، كما تنطبق القواعد نفسها للبحث عن مخطط زمني مُعنوَن.

عرض توضيحي: ميزة "كشف الصورة" من جديد

بعد إعادة إنشاء الإصدار التجريبي لميزة "إظهار الصورة" من وقت سابق، يظهر الرمز المعدَّل على النحو التالي:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

باستخدام view-timeline-name: revealing-image، سيتم تتبُّع العنصر ضمن أقرب شريط تمرير. ويتم بعد ذلك استخدام القيمة نفسها كقيمة للسمة animation-timeline. النتيجة المرئية هي نفسها تمامًا كما كانت في السابق.

✨ جرِّب هذه الميزة بنفسك

إنشاء مخطط زمني لتقدّم العرض في JavaScript

لإنشاء "عرض مخطط زمني" في JavaScript، أنشئ مثيلًا جديدًا لفئة ViewTimeline. نقْل حقيبة موقع تتضمّن subject الذي تريد تتبُّعه وaxis وinset.

• ‫subject: إشارة إلى العنصر الذي تريد تتبُّعه ضمن شريط التمرير الخاص به.
• ‫axis: المحور المطلوب تتبُّعه على غرار متغير CSS، تكون القيم المقبولة هي block وinline وx وy.
• ‫inset: تعديل موضع الشريحة (موجب) أو موضع الشريحة (سالب) في مساحة التمرير عند تحديد ما إذا كان المربّع مرئيًا

const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

لإرفاقها بحركة رسوم متحركة على الويب، يجب تمريرها على أنّها سمة timeline وحذف أيّ duration إذا كان هناك أيّ منها. يمكنك اختياريًا إدخال معلومات النطاق باستخدام السمتَين rangeStart وrangeEnd.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ جرِّب هذه الميزة بنفسك

مزيد من الإجراءات التي يمكنك تجربتها

الربط بنطاقات متعدّدة في "مخطط عرض الوقت" باستخدام مجموعة واحدة من الإطارات الرئيسية

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

✨ جرِّب هذه الميزة بنفسك

في هذا العرض التوضيحي، يتم تزيين كل عنصر بمخطط زمني واحد للعرض يتتبّع العنصر أثناء عبوره مساحة التمرير، مع إرفاق رسوم متحركة مُشغَّلة باللف. يتم إرفاق الحركة animate-in بنطاق entry من المخطط الزمني، ويتم إرفاق الحركة animate-out بنطاق exit من المخطط الزمني.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

بدلاً من تشغيل متحركَين مختلفَين مرتبطَين بنطاقَين مختلفَين، من الممكن أيضًا إنشاء مجموعة واحدة من اللقطات الرئيسية التي تحتوي على معلومات النطاق.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

بما أنّ اللقطات الرئيسية تحتوي على معلومات النطاق، ليس عليك تحديد animation-range. النتيجة هي نفسها تمامًا كما كانت من قبل.

✨ جرِّب هذه الميزة بنفسك

إرفاق مخطط زمني للانتقال غير المرتبط بأحد العناصر الرئيسية

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

لكي يعمل هذا الإجراء، يجب استخدام السمة timeline-scope. يمكنك استخدام هذه السمة لتعريف مخطط زمني بهذا الاسم بدون إنشائه فعليًا. ويمنح ذلك الجدول الزمني الذي يحمل هذا الاسم نطاقًا أوسع. في الممارسة العملية، يتم استخدام السمة timeline-scope في عنصر رئيسي مشترَك حتى يمكن إرفاق مخطط زمني لعنصر التمرير الفرعي به.

على سبيل المثال:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

في المقتطف التالي:

• يعلن عنصر .parent عن مخطط زمني يحمل الاسم --tl. ويمكن لأي عنصر فرعي العثور عليها واستخدامها كقيمة للسمة animation-timeline.
• يحدِّد العنصر .scroller في الواقع مخططًا زمنيًا للانتقال إلى الأعلى أو الأسفل باسم --tl. ويكون هذا القسم مرئيًا تلقائيًا للأطفال فقط، ولكن بما أنّ .parent قد ضبطه على أنّه scroll-timeline-root، يتم إرفاقه به.
• يستخدم العنصر .subject المخطط الزمني --tl. ينتقل إلى أعلى شجرة السلف ويجد --tl في .parent. عندما يشير --tl في .parent إلى --tl في .scroller، سيتتبّع .subject بشكل أساسي المخطط الزمني لتقدّم الانتقال للأسفل أو للأعلى في .scroller.

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

يمكن استخدام السمة timeline-scope مع كلّ من "جداول التنقّل الزمني" و"عرض الجداول الزمنية".

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

يمكنك الاطّلاع على جميع العروض التوضيحية التي تتناولها هذه المقالة على الموقع الإلكتروني المصغّر scroll-driven-animations.style. يتضمّن الموقع الإلكتروني العديد من العروض التوضيحية الأخرى لإبراز الإمكانات المتاحة باستخدام الصور المتحرّكة المستندة إلى الانتقال.

من بين العروض التوضيحية الإضافية هذه القائمة التي تتضمّن أغلفة الألبومات. يتم تدوير كل غلاف بشكل ثلاثي الأبعاد عندما يكون في مركز العرض.

✨ جرِّب هذه الميزة بنفسك

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

تتوفر أيضًا في scroll-driven-animations.style مجموعة من الأدوات، مثل الرسم البياني لعرض مستوى التقدّم في النطاق الزمني الذي تم تضمينه سابقًا في هذه المشاركة.

يتم أيضًا تناول الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل في الميزات الجديدة في Web Animations في مؤتمر Google I/O لعام 2023.