في هذه المشاركة، يمكنك التعرّف على كيفية إنشاء بعض الصور المتحركة الرائجة المتوفرة على CodePen. تستخدِم كل هذه الصور المتحركة التقنيات الفعّالة التي تمّت مناقشتها في مقالات أخرى في هذا القسم.
اطّلِع على لماذا تكون بعض الرسومات المتحركة بطيئة؟ للتعرّف على النظرية التي تستند إليها هذه الاقتراحات، وعلى دليل الرسومات المتحركة للحصول على نصائح عملية.
صورة متحركة لعملية تحميل المعالج
عرض صورة متحركة لتحميل "المساعد" على CodePen
تم إنشاء صورة التحميل المتحركة هذه بالكامل باستخدام CSS. تم إنشاء الصورة بالإضافة إلى كل الرسوم المتحركة باستخدام CSS وHTML، بدون صور أو JavaScript. لفهم طريقة إنشاء هذا المحتوى ومدى جودته، يمكنك استخدام "أدوات مطوّري البرامج في Chrome".
فحص الحركة باستخدام "أدوات مطوّري البرامج في Chrome"
أثناء تشغيل الصورة المتحركة، افتح علامة التبويب "الأداء" في "أدوات مطوّري البرامج في Chrome" وسجِّل بضع ثوانٍ من الصورة المتحركة. يجب أن تلاحظ في "الملخّص" أنّ المتصفّح لا ينفّذ أي عمليات "تخطيط" أو "رسم" عند تشغيل هذه الحركة.