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

Bramus

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

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

ما هي الصور المتحركة المستندة إلى التمرير؟

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

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

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: الخاتمة

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

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