نقدّم لك ميزة "الاستفادة من فعالية الصور المتحركة التي تعتمد على التمرير"

Bramus

يسرّنا الإعلان عن إصدار "الاستفادة من إمكانات الرسوم المتحرّكة المستندة إلى الانتقال في الصفحة"، وهو عبارة عن دورة تدريبية مكوّنة من 10 أجزاء من الفيديوهات للتعرّف على كل ما يتعلّق بالرسوم المتحرّكة المستندة إلى الانتقال في الصفحة باستخدام CSS أو JavaScript.

يمكنك مشاهدة المسلسل على YouTube. تم تضمين الحلقة الأولى هنا.

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

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

شاهِد سلسلة الفيديوهات أو اطّلِع على المستندات لمعرفة المزيد من المعلومات عن الرسوم المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل.

الحلقات

تتألف الدورة من 10 حلقات ومقسمة إلى قسمَين كبيرَين: شرح للمفاهيم الأساسية التي تشكّل الرسوم المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل، يليه بعض التطبيقات العملية.

  1. الحلقة 1: مقدمة
  2. الحلقة 2: المفاهيم الأساسية: scroll() وScrollTimeline
  3. الحلقة 3: المفاهيم الأساسية: view() وViewTimeline
  4. الحلقة 4: المفاهيم الأساسية: توضيح نطاقات المخطط الزمني
  5. الحلقة 5: المفاهيم الأساسية: البحث في المخطط الزمني والمخططات الزمنية المُسمّاة
  6. الحلقة 6: تطبيق عملي: إضافة تأثيرات التمرير إلى حاوية التمرير
  7. الحلقة 7: تطبيق عملي: إضافة تأثيرات متحركة إلى العناصر في اتجاهات مختلفة
  8. الحلقة 8: تطبيق عملي: إضافة حركة إلى النماذج الثلاثية الأبعاد وغير ذلك عند الانتقال إلى أعلى الصفحة أو أسفلها
  9. الحلقة 9: تطبيق عملي: رصد سرعة التمرير
  10. الحلقة 10: الخاتمة

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

مزيد من الموارد