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

Bramus

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

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

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

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

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

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

الحلقات

تتألف الدورة التعليمية من 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: خاتمة.

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

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

• المستندات: تحريك العناصر عند الانتقال باستخدام الصور المتحركة المستندة إلى الانتقال
• العروض التوضيحية والأدوات: scroll-driven-animations.style
• الحصول على إضافة مصحّح الأخطاء في "أدوات مطوّري البرامج"