جميل جدا!
الآن لدي بعض الملاحظات في ما يخص أول 4 تأثيرات
في أول وثاني واحدة، استخدمت أنت width و height للتحكم في أبعاد الصورة. سيكون من الأفضل أن تستخدم
transform:scale(1.33);
بالنسبة للثانية أيضا استخدم transform:scale(0.75);
حسنا، الآن نأتي للسبب لماذا؟ بالنسبة للطريقة التي تقوم بها أنت فهي تعمل على إعادة حساب أماكن النقط (pixels) بعد تحريكها، ثم إعادة رسمها على شكل طبقة جديدة (layer) وكل هذا يتم بسرعة، الآن ت خيل المجهود الكبير على المعالج
أما في حالة استخدام transform فالمتصفح يقوم بالتالي: يجمع العنصر الذي سيتحرك في layer لوحده، ثم يقوم بتحريكه، تصغيره وما إلى ذلك. ويقوم بهذا عبر GPU (وحدة معالجة الرسوميات) والتي صنعت خصيصها لهذه الأمور، لذا سيكون الأمر أسرع، وأخف على المتصفح
بالنسبة للثالثة والرابعة، لا تحتاج أن تقوم بعمل margin-* لتحريك عنصر ما، تستطيع استخدام left و right و top و bottom لتحريك عنصر (مادامت خاصية position فيه هي relative) أو أفضل! تستطيع استخدام translate
transform: translate(200px,0)
والأسباب هي نفسها كالأول، من أجل تحكم أسرع وأخف
ملاحظة: في بعض المتصفحات لا يتم تفعيل gpu acceleration مباشرة، هنا نلجأ إلى خدعة بسيطة (ريثما يتم دعم خاصية will-change من عدد جيد من المتصفحات) transform: translateZ(0);
هذه الخاصية لا تقوم بشيء، ولكن عندما يقرأها المتصفح سيقوم بتفعيل gpu acceleration بسببها
وفي النهاية، أتمنى أن يكون درسك مفيدا للناس، وأتمنى من قلبي أن لا تتوقف عن المجهود الرائع
بالتوفيق
التعليقات