نهاية الرحلة

هنيئًا لك، لقد أنهيت سلسلة أساسيات التحريك في CSS. آمل أن تكون قد استمتعت واستفدت منها. قبل أن نُنهي هذه السلسلة، سنستعرض سويةً بعض المصادر المفيدة للتعمق أكثر في عالم الحركات.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

ملخص التحريك في CSS

لقد أعددت ملخصًا عن الانتقالات والحركات (بصيغة PDF) يلخص خاصياتها. وقد صممته ليناسب صفحة واحدة بحجم A4.

أدوات مساعدة لإنشاء الحركات

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

الإطار Animate.css

يمكنك الإشارة إلى ملف CSS الخاص بالإطار Animate.css، وإضافة أيّ من أصناف الحركات الجاهزة إلى العناصر المراد تحريكها. إليك مثالًا عن استخدام Animate.css.

الإطار Hover.css

يعد الإطار Hover.css بديلاً جيدًا عن Animate.css، إذ يوفر مجموعة كبيرة من الحركات الجاهزة لتطبيقها على الروابط أو الأزرار أو الشعارات أو أي عنصر من عناصر HTML.

أدوات أخرى

إنشاء الحركات عبر CSS وسيلة قوية جدًا، ويمكنها تحقيق الكثير دون الحاجة إلى اللجوء إلى تقنيات أخرى مثل JavaScript. ومع ذلك، فقد لا تكون هذه الوسيلة مناسبة لجميع الحالات. في بعض الأحيان، ستحتاج إلى حركات أعقد، ويمكن آنذاك الاستعانة بلغة JavaScript. تعتمد أفضلُ الحزم على CSS للاستفادة من سرعتها، ودعم المتصفحات لها.

منصة GSAP

منصة GSAP (Greensock Animation)‎ هي طريقة قائمة على JavaScript لإنشاء حركات متقدمة، وتوفر تحكمًا دقيقًا، وأداءً رائعًا. هذه الأداة تتطلّب بعض الوقت لتعلمها، لكنها مفيدة ونافعة.

الإطار Snabbt.js

الإطار Snabbt هو وسيلة قوية وفعّالة لإنشاء حركات معقدة باستخدام دوال توقيت مخصصة. إذ ينشئ مصفوفات تحويل (transform matrices) ليستخدمها المتصفح في تحريك الحركات، لهذا يتميز بأداء جيد جدًا.

الإطار CSS Animate

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

موقع Cubic-bezier.com

عندما ترغب في إضفاء الحيوية على دوال التوقيت، فإنّ موقع Cubic-bezier.com هو الأداة الأفضل لذلك. إذ يساعد على تخصيص دوال التوقيت. وقد تم تصميم أداة مشابهة في أدوات المطور في المتصفح Chrome.

ماذا بعد؟!

السؤال الذي قد يساورك الآن هو: «ماذا أفعل للانتقال إلى مستوى متقدم في مجال التحريك؟»

اقتراحي لك هو البحث عن التحديات. ابحث عن الإلهام في مواقع مثل Dribbble.com أو CodePen.io. استوحي الأفكار من المنتجات الشهيرة (كثيرًا ما أعيد تصميم تصميمات Apple) أو الأفلام أو البرامج التلفزيونية. هل يمكن محاكاتها والاستفادة منها في تصميم المواقع؟ هل ستكون لغة CSS هي الطريقة الأنسب للقيام بذلك؟ اسأل نفسك وابحث عن الإجابات بحثًا دقيقًا، فالبحث هو عماد التَعلُّم.

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

إن أردت ألا يضيع منك ما تعلّمته في هذه السلسلة، فعليك بالممارسة والتمرين. ابحث عن مواضع مناسبة لاستخدام التحريك، وابحث عما يثير اهتمامك. وحاول الاستمتاع أثناء التعلم، فذلك سيجعله أسهل.

هنيئًا لك على الانتهاء من هذه المقدمة عن إنشاء الحركات عبر CSS! آمل أنك استمتعت بها واستفدت منها. إضافة الحركات ستجعلك مصممًا أفضل، وتجعل مشاريعك متميزة وجذابة.