الرسوم المتحركة الحديثة للويب: من انتقالات CSS إلى Web Animations API

غالبًا ما تفشل مواقع الويب الثابتة في جذب انتباه المستخدم والشعور بالجمود. إن إضافة حركة سلسة ومحسّنة الأداء هي المفتاح لإنشاء تجارب مستخدم حديثة وجذابة على الويب. يرشدك هذا المساق النصي عبر الطيف الكامل لحركة الويب، بدءًا من انتقالات CSS الأساسية وصولاً إلى واجهات برمجة تطبيقات المتصفح المتطورة (APIs). ستفهم كيفية تصميم وتنفيذ انتقالات سلسة تبدو طبيعية وتعمل بشكل جميل على أي جهاز. ما ستتعلمه: * فهم مبادئ الرسوم المتحركة الأساسية، ودوال التوقيت (timing functions)، والإطارات الرئيسية (keyframes) في CSS؛ * تطبيق الحركة التفاعلية باستخدام Web Animations API الأصلية في JavaScript؛ * إنشاء رسوم متحركة تعتمد على التمرير وتستجيب ديناميكيًا لتمرير المستخدم دون الحاجة إلى مكتبات خارجية ثقيلة؛ * تطبيق View Transitions API لتحريك تغييرات الحالة والتنقل بين الصفحات بسلاسة؛ * تصميم رسوم متحركة يمكن الوصول إليها تحترم تفضيلات المستخدم مثل استعلامات الوسائط لتقليل الحركة (reduced motion media queries)؛ * تحسين أداء الرسوم المتحركة من خلال الاستفادة من تسريع الأجهزة (hardware acceleration) وتجنب إجهاد التخطيط (layout thrashing). يبدأ المساق بمصطلحات الرسوم المتحركة الأساسية وأساسيات CSS قبل الانتقال إلى واجهات برمجة تطبيقات المتصفح الحديثة (APIs). يتم تعزيز كل مفهوم بشروحات مكتوبة واضحة، ومقتطفات برمجية عملية، وتمارين منظمة. تم تصميم هذا المساق لمطوري ومصممي الويب الذين يرغبون في إتقان الحركة الأصلية للويب، ولا تتطلب خبرة سابقة في الرسوم المتحركة. ابدأ القراءة اليوم وارفع مستوى مشاريع الويب الخاصة بك باستخدام رسوم متحركة حديثة وأصلية.