يسعدنا الإعلان عن إطلاق Unleash the Power of Scroll-Driven Animations، وهي دورة فيديو تدريبية مكوّنة من 10 أجزاء لمعرفة كل شيء عن الصور المتحركة التي تعتمد على التمرير باستخدام CSS أو JavaScript.
يمكنك مشاهدة السلسلة على YouTube. الحلقة الأولى مضمّنة هنا.
هل تريد الرسوم المتحركة التي تعتمد على التمرير؟
باستخدام الرسوم المتحركة التي تعتمد على التمرير، يمكنك استخدام رسم متحرك CSS أو WAAPI حالي وتحريكه أثناء التمرير. ولهذا السبب، تكتسب الصور المتحركة التي تعتمد على التمرير جميع المزايا التي توفرها واجهات برمجة التطبيقات هذه. ويتضمن ذلك الرسوم المتحركة التي تعتمد على التمرير السريع على الأجهزة والتي لا تخضع للأعطال عند حظر سلسلة التعليمات الرئيسية.
تتوفر الرسوم المتحركة التي تعتمد على التمرير في Chrome بدءًا من الإصدار 115 من Chrome وهي المرشح المثالي للتحسين التدريجي.
شاهِد سلسلة الفيديوهات أو اطّلِع على المستندات لمعرفة المزيد حول الصور المتحركة التي تعتمد على الانتقال للأعلى أو للأسفل.
الحلقات
تتكون الدورة التدريبية من 10 حلقات تنقسم إلى جزأين كبيرين: شرح للمفاهيم الأساسية التي تشكل الصور المتحركة التي تعتمد على التمرير، يليها بعض التطبيقات العملية.
- الحلقة 1: مقدّمة
- الحلقة 2: المفاهيم الأساسية:
scroll()وScrollTimeline - الحلقة 3: المفاهيم الأساسية:
view()وViewTimeline - الحلقة 4: المفاهيم الأساسية: إزالة الغموض عن نطاقات المخطط الزمني
- الحلقة 5: المفاهيم الأساسية: البحث عن المخطط الزمني والمخططات الزمنية المحدّدة
- الحلقة السادسة: التطبيق العملي: إضافة ظلال التمرير إلى حاوية التمرير
- الحلقة 7: التطبيق العملي: تحريك العناصر باتجاهات مختلفة
- الحلقة 8: تطبيق عملي: تحريك التصاميم الثلاثية الأبعاد والمزيد عند التمرير
- الحلقة 9: التطبيق العملي: رصد سرعة الانتقال
- الحلقة 10: الخاتمة
تتم مشاهدة الحلقات بشكل أفضل بالترتيب لأنّها تعتمد على عروض توضيحية وأساليب تم تناولها في الحلقات السابقة. تكون العروض التوضيحية والأدوات المعروضة في كل حلقة متاحةً على الإنترنت وتحمل روابط في الوصف.
مزيد من المراجع
- المستندات: إضفاء المؤثر الحركي على العناصر عند التمرير باستخدام الصور المتحركة التي تعتمد على الانتقال
- العروض التوضيحية والأدوات: scroll-move-animations.style
- الحصول على إضافة DevTools Debugger