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

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

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

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

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

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

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

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

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

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

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

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

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

تحدد مواصفات الصور المتحركة التي تعتمد على التمرير نوعين جديدين من المخططات الزمنية التي يمكنك استخدامهما:

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

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

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

يمثل موضع تمرير البداية مستوى التقدم بنسبة 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: يستخدم مقياس التقدم على طول المحور 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

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

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

لتعديل المحور المطلوب تتبُّعه، عليك أيضًا تعريف السمة 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 على المحور س من% 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();
}

Intermezzo: عرض نطاقات "المخطّط الزمني"

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

ويمكن أيضًا ربطه بجزء معيّن من "عرض المخطط الزمني" عن طريق تحديد النطاق الذي يجب إرفاقه به. ولا يمكن مثلاً أن يحدث ذلك إلا عند دخول الشخص في شريط التمرير. في التصور التالي، يبدأ التقدم في الحساب من 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" مع كلٍّ من "المخططات الزمنية" و"عرض المخططات الزمنية".

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

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

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

✨ تجربة الميزة بنفسك

أو هذا العرض التوضيحي لبطاقات التجميع التي تستفيد من position: sticky. مع تكديس البطاقات، يقل حجم البطاقات العالقة، ما يمنحك تأثير عمق أكبر. في النهاية، لا تظهر المكدس بأكمله كمجموعة.

✨ تجربة الميزة بنفسك

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

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