سلاسل تعليمية المرجع الشامل إلى التحريك عبر CSS

لا يخفى على أي مطور ويب خصوصًا مطوري واجهة المستخدم الأمامية (front end developers) أهمية إضفاء بعض الحيوية في المواقع التي يصممونها عبر الحركات، إذ هنالك عدة فوائد يمكن تحصليها من إضافة الحركات إلى صفحات الموقع أهمها الابتعاد عن السكون الممل، ولفت الانتباه، وتحسين التواصل مع الزائر أو المستخدم ...إلخ.

اقتباس

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

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

جدول المحتويات

حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار:

• ما هي أهمية الحركات؟
• ظهور الحركات في الويب
• أريد تعلم إنشاء الحركات، فمن أين أبدأ؟
• دروس نظرية: مبادئ الحركات والتحريك
• دروس تطبيقية عملية

ما هي أهمية الحركات؟

لا شك أنَّك لاحظت من خلال تصفحك للمواقع كمية الحركات المُطبَّقة فيها بدءًا من الحركات الصغيرة في الأزرار والقوائم وحتى الصور المتحركة (GIFs) والفيديوهات التي تعمل تلقائيًا. وبمناسبة الإشارة إلى الصورة المتحركة، فقد انتشرت كثيرًا في الآونة الأخيرة وهذا طبيعي بالموازنة مع الصور الساكنة المملة. فيمكنك عبر صورة متحركة رواية قصة قصيرة أو إيصال فكرة للناظر بطريقة تتفوق فيها على عدة فقرات مكتوبة. بعبارة أخرى، معلومٌ أنَّ الإشارات والحركات أبلغ من الكلمات وتترك أثرًا أعمق في الذهن، فكيف لا وهي اللغة التي يمكن أن يتخاطب بها جميع البشر مهما كانت لغتهم وخلفيتهم! أي يمكنك عبر الحركات التواصل مع شريحة أوسع من المستخدمين.

اقتباس

إدراج الحركة في التصميمات يجعلها أكثر كفاءة في إيصال المعلومة. الصور المتحركة أبلغ من الكلمات الملفوظة أو المكتوبة.

إذا نظرت حولك عمومًا أو أمعنت النظر في الطبيعية خصوصًا، ستجد أنَّ الحركة في كل مكان وهي سمة الطبيعية الأساسية، فكلمة «حيوية» هي مصدر صناعي من «حياة» ويراد بها الفاعلية والنشاط. وتركبية جسم الإنسان وعدد مفاصله تؤكد أهمية الحركة التي تمثِّل سمة أساسية فيه.

اقتباس

"يتمحور التحريك إلى خلق شعور بالحياة". براد بيرد

فمثل التحريك كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وأصبح في عصرنا هذا علمًا يُدرّس وعملًا يُنجَز. هل خطر في ذهنك الآن أفلام الرسوم المتحركة؟ تمامًا، فهذا ما قصدته. لابد أنَّك تعرف ديزني وشخصيتها المشهورة ميكي ماوس والمحقق كونان وشهرة سلاسل المانغا اليابانية (أي القصص المصورة) وتطورها إلى رسوم متحركة (أنمي)؛ فكل ذلك أساسه الحركة والتحريك وإبداع الإنسان في توظيف الحركة في شتى المجالات.

ظهور الحركات في الويب

إن كنت من جيل الثمانينات والتسعينات، فلابد أنَّك زرت الكثير من المواقع التي كانت تستعمل حركات شتى مثل بطاقات لامعة أو نجوم مشعة أو قطط راقصة أو غيرها من الأشكال والتي كنت أراها مزعجة لي في بعض الأحيان؛ فلا أحب الاستعمال الزائد للحركة كثيرًا وكنت أهرب من المنتديات التي تفرط في استعمالها. أغلب ذلك كان يجري عبر تقنية Flash (الفلاش) التي أحدث ثورة في الحركات والتحريك آنذاك (بعد الصور المتحركة GIF). على أي حال، كانت ذلك يُسبِّب بطئيًا كبيرًا في تحميل الموقع مما يؤثر سلبًا عليه.

في هذه الأيام ومنذ فترة ليست ببعيدة، ظهرت تقنيات حديثة يمكن عبرها إضفاء الحيوية والحركة إلى مواقع الويب وذلك عبر HTML و CSS وجافاسكربت وصور SVG دون أن تؤثر على الأداء تأثيرًا ملحوظًا أو سلبيًّا. وبالتالي، دخلت الحركة إلى أغلب عناصر الصفحة بأدق تفاصيلها. فلم يعد الغرض منها إضفاء الحيوية والمتعة للمستخدم فقط، بل تحسين تجربة وواجهة المستخدم أيضًا (UX/UI) مما يجعل الموقع أفضل وأسهل للاستخدام خصوصًا إذا كان موقع الويب (أو تطبيق الويب) تفاعليًّا مع المستخدم.

أريد تعلم إنشاء الحركات، فمن أين أبدأ؟

حسنًا، إن اقتنعت بضرورة وأهمية الحركات في صفحات الويب، فقد تتساءل: من أين أبدأ وهل يوجد مرجع يشرح لي التحريك شرحًا كافيًا ووافيًا؟ أجيبك، نعم يوجد وبالعربية أيضًا.

وفرنا في أكاديمية حسوب سلسلة مقالات عن تعلم التحريك في CSS والتي تأخذك خطوة بخطوة لإنشاء حركات احترافية وإضافتها إلى موقعك. هذه السلسلة هي ترجمة لفصول كتاب CSS Animation 101.

ستغطي هذه المقالات المواضيع التالية:

• أولًا: ما هي الحركات؟ سنحاول أن نفهم سبب استخدام الحركات. سنقدم أيضًا الخاصيتين transition و animation، إضافة إلى بعض مصادر الإلهام.
• ثم: سنتحدث بتفصِيل عن الخاصية transition. ونتعلم كيفية عمل الانتقالات، والخاصيات التي تُمكّننا من التحكم في الحركة.
• بعد ذلك: سنركز على الخاصية animation، ونتعلم كيفية إنشاء الإطارات المفتاحية التي تتيح لنا فعل أشياء تتجاوز إمكانيات الانتقالات البسيطة.
• أخيرًا: سنجمع كل ما تعلمناه في الفصول السابقة. سندرس بعض الأمثلة المتقدمة التي تستخدم كلا الخاصيتين، ونتعلم الرابط بين الحركات وسهولة الوصول (accessibility)، ونشارك بعض مصادر CSS المفيدة التي يمكنك تطبيقها في مشاريعك، وأدوات JavaScript التي يمكن استخدامها لإنشاء تأثيرات أكثر تقدمًا.

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

دروس نظرية: مبادئ الحركات والتحريك

سأكتب عناوين مقالات سلسلة التحريك في CSS مع شرح مبسط عن ما ستتعلمه فيها هنا لسهولة الوصول إليها:

1. ما هي استخدامات الحركات؟

هذه المقالة هي أول مقالة في السلسلة وتناقش سبب إضافة الحركات وتبنيها في مواقع الويب وكيف يمكن أن يستفيد منها مصممو مواقع الويب.

2. تجهيز بيئة العمل لإنشاء الحركات

ستتعلم في هذه المقالة كيفية تجهيز بيئة العمل لديك لإنشاء الحركات عبر CSS وتشغليها إضافةً إلى تحديد سير العمل. سيكون العمل إمَّا باستعمال المتصفح نفسه (سيكون الاعتماد غالبًا على CodePen) أو بتجهيز بيئة تطوير محلية. سيتطرق المقال إلى أداة البناء Gulp لأتمتة بعض العلميات الروتينية.

3. مدخل إلى الإنتقالات: التنقل بين الحالات

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

4. مدخل إلى الحركات: مفهوم الحركة

يشرح هذا المقال أولًا الفرق بين الإنتقال والحركة ويوضح كيف يُنفِّذ المتصفح حركة ما على عنصر. يعرِّفك هنا على خاصية الحركة animation في CSS شقيقة خاصية التحويل transition وكيفية استعمالها لإنشاء الحركات. يعرض أيضًا مثالين عمليَّين ويحللهما لفهم كيف تجري الحركة. يشرح أخيرًا متى تُستخدَم الحركة ومتى يُستخدَم الانتقال.

5. تطبيق عملي: الانتقالات

تتعمق هذه المقالة في استعمال الخاصية transition وتعرض مثالًا عمليًّا عن تطبيقها على زر لتغيير حالته أثناء تحويم مؤشر الفأرة فوقه. تناقش المقالة أيضًا موضوع دعم هذه الخاصية عبر مختلف المتصفحات.

6. خاصيات الانتقالات

تشرح هذه المقالة جميع خاصيات الانتقالات المرتبطة بالخاصية transition مع عرض بعض الأمثلة. أي أنها ستعرض الصياغة المختزلة والصياغة التفصيلية المطوَّلة لها. ستتطرق أخيرًا إلى شرح موضوع مهم يتعلق بالأشياء التي لا يطبَّق الانتقال عليها.

7. دوال التوقيت

تتحدث هذه المقالة عن دوال التوقيت (timing function) وكيفية استعمالها مع الانتقالات المطبقة على العناصر، وتشرح أشهر أنواع دوال التوقيت المستعملة حاليًّا مع عرض صور وأمثلة توضيحية تساعد على فهمها.

8. الانتقالات المتعددة

سترى في هذه المقالة ما يحدث عند تطبيق عملية انتقال واحدة على عنصر تغير فيه عدة حالات، أي كيف يمكن توليد حركة جديدة عبر تطبيق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات. يجري تطبيق ذلك على مثاليين عمليين ملهمين.

9. الانتقالات وجافاسكربت

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

10. تطبيق عملي: التحريكات

ستلقي هذه المقالة نظرة أعمق على الخاصية animation شيقية الخاصية transition والمكملة لها في توليد الحركات مع ذكر عدة تطبيقات عملية عليها. سيجري أيضًا شرح الإطارات المفتاحية (keyframes) وارتباطها الوثيق بتلك الخاصية وكونها أساس الحركة.

11. خاصيات الحركات

تشرح هذة المقالة الصياغة المختزلة والصياغة التفصيلية المطوَّلة للخاصية animation وتشرح بعدها الخاصيات المرتبطة بها ووظيفة كل منها. تتطرق أخيرًا إلى كيفية استخدام دوال التوقيت ضمن الإطارات المفتاحية.

12. تطبيق عملي: الإطارات المفتاحية

تلقي هذه المقالة نظرة أعمق على الإطارات المفتاحية (keyframes) وصياغتها وكيفية استعمالها مع الحركات لتحريك العناصر تحريكًا مخصَّصًا. سيجري شرح كل ذلك شرحًا تفصيليًّا عبر تطبيق عملي لتحريك زر حركة مُخصَّصة.

13. الحركات المتعددة المتزامنة

تتحدث هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) لإنشاء حركة معقدة مؤلفة من عدة حركات تعمل بشكل متزامن مع بعضها بعضًا. المثال العملي في هذا الدرس هو إنشاء إشارة مرور.

14. موجز الحركات

نتوقف هنا في هذه المقالة للالتقاط الأنفاس وأخذ استراحة بسيطة يجري فيها مراجعة وتلخص كل ما تعلمته مسبقًا في المقالات السابقة عن الحركات والانتقالات وتطبيقها لتحريك العناصر في CSS.

15. رواية القصص عبر الحركات

تطبِّق هذه المقالة كل ما تعلمته مسبقًا لإنشاء حركات هادفة مفيدة، إذ تشرح مفهوم الصورة الرئيسية المستعملة بكثرة في الصفحات الرئيسية للموقع وصفحات الهبوط والتي تحكي هدف الوقع أو تُعلِّم كيفية استخدامه.

16. حرب النجوم (Star War)

سنطبق في هذه المقالة كل ما تعلمته في المقالات السابقة لصنع حركة متجِهيًّة (SVG) مرحة، وذلك بالعمل على تحريك عنوان فيلم حرب النجوم من إعلان "The Force Awakens" ليظهر وكأنه ثلاثي الأبعاد. في أثناء ذلك، سيجري شرح الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎.

17. إظهار المحتوى أثناء التمرير

سوف تتعلم في هذه المقالة كيفية إظهار العناصر عند تمرير (scrolling) إليها وعرضها على نافذة المتصح مع إضافة حركة إليها. يعرض لتحقيق ذلك إطاري عمل هما: Wow.js و Animate.css مع عدم نسيان الدعم الذي يوفره Modernizr احتياطًا من أولائك المستخدمين الذين لا يشغّلون JavaScript لسبب ما.

18. سهولة الوصول

تنتقل هذه المقالة بعيدًا عن الحركات للتحدث عن سهولة الوصول (accessibility)، إذ لا تقل عملية تسهيل وصول جميع الأشخاص للمحتوى أهمية عن عملية إنشاء الحركات. تدور رحى هذه المقالة حول مناقشة العبارة التالية: ما الفائدة من الحركات إن منعت بعض الأشخاص (مثل الذين يستخدمون قارئات الشاشة مثلًا) من الوصول إلى المحتوى وعرضه، أو سببت إزعاجًا لآخرين وأعاقتهم عن استخدام موقعك أو تطبيقك بأريحية وكفاءة.

19. نهاية الرحلة

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

دروس تطبيقية عملية

تحوي الأكاديمية على مقالات عدة تتحدث عن الحركات في CSS بمستويات متفاوتة ومواضيع متنوعة تصب جميعها في موضوع واحد ألا وهو «التحريك في CSS»، لذا جمعت لك جميع هذه المقالات لسهولة الوصول إليها من مكان واحد ولتكون لك مرجعًا تستعين به في المستقبل.

مبادئ التحريك في صفحات الويب باستخدام CSS

تشرح هذه المقالة المبادئ الاثنا عشر لأساسيات التحريك عبر CSS - المنشورة بكتاب عنوانه:  "وهم الحياة: الرسوم المُتحركة في ديزني" - وتناقش كيف لها أنّ تُطبَّق في صناعة صفحات الويب مع أمثلة توضيحيّة وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة.

تأثيرات حركية على عناصر قوائم HTML باستخدام CSS

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

تحريك شبه العناصر (pseudo-elements) في CSS

ستتعرف في هذه المقالة على كيفية استخدام عنصر زائف (pseudo-element) لإضافة تأثير بصري على زر في CSS. يشرح أولًا ماهية شبه العناصر (أو العناصر الزائفة) وفائدتها وكيفية الاستفادة منها في إنشاء الحركات، ثم ينتقل إلى كيفية توظيفها في إنشاء زر برَّاق عبر الحركات.

تحريك زر تفضيل التغريدة الخاص بتويتر باستخدام CSS فقط

يعرض هذه المقالة طريقة لمحاكاة حركة زر "التفضيل" في تويتر الذي حدثه مؤخرًّا المعتمدة على سلسلة من الصور ولكن ستجري عملية محاكاة الحركة وتقليدها باستعمال CSS مع دوال التوقيت بالإضافة إلى شرح مفهوم وهم الحركة.

تنبيهات مؤقتة باستخدام CSS

ستتعلم في هذه المقالة البسيطة كيفية عمل تنبيهات مؤقتة بحركة جميلة باستخدام CSS فقط حتى تخطر المستخدم بوجود شيء جديد. ما سيجري تطبيقه هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفاؤها. وسنضيف شريط تقدم (progress bar) لنعرف كم تبقى من الوقت حتى يختفي التنبيه.

كيفية إنشاء قائمة متحركة من نوع off-canvas في CSS

يشرح هذا المقال كيفية إنشاء قائمة تنقل من النوع الذي يكون خارج الشاشة (off-canvas)، إذ ستتعلم ببناء شيء شبيه بهذه المعاينة (انظر إلى Demo2) بحيث تكون الأيقونة التي تفتح القائمة موجودة في أعلى يسار الشاشة والحد (border) يكون اسمك من جهة اليسار.

تأثير الانتقال في مشهد فضائي

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

كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript

يشرح هذا الدرس طريقة إنشاء ساعة متحركة باستخدام تأثيرات CSS و JavaScript. أساس إنشاء هذه الساعة سيكون باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. ستستعمل أيضًا التحريكات Animations والانتقالات Transitions في CSS، وسنعتمد على JavaScript لضبط التوقيت الابتدائي.

تحريك وانتقال العناصر في CSS3 (الانتقال)

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

تحريك وانتقال العناصر في CSS3 (التحريك)

يكمل هذا المقال شرح مفهوم تحريك العناصر وتطبيق التأثيرات البصرية عبر الحركات (الخاصية animation) في CSS ويوضح كيفية تحريك العنصر بين عدة حالات مع أمثلة عملية. المواضيع التي يتحدث المقال عنها أيضًا هي الإطارات المفتاحية، ومدة الحركة ودوال التوقيت، وتأخير تشغيل الحركة، واتجاه الحركة وحالتها، وتخصيص الحركات، وكيفية تطبيق حركة بتعليمة واحدة مختزلة.

تأثير الانتقال والحركة في CSS

يُعرِّفك هذا المقال على تأثيرات الانتقالات (Transitions) والحركات (Animations) في CSS3 بالإضافة إلى الحديث عن دعم المتصفحات لها، والخصائص التي تسمح بتطبيق تأثيرات الانتقال عليها، ومدة وتوقيت تأثير الانتقال، والإطارات المفتاحية في الحركات، ودوال التوقيت، وأزمنة الحركات، وتكرار واتجاه وحالة الحركة، وغيرها.

أفضل 25 مكتبة تحريك في CSS

يعرض لك  هذا المقال أفضل مكاتب التحريك في ‏CSS، والتي تساعدك في حفظ وقتك عند تصميم ‏موقع الويب الخاص بك من خلال استخدامك لهذه المكاتب التي تضفي بعض الديناميكية والتفاعل إلى ‏عملك، إذ تحوي هذه المكتبات على العديد من الحركات والمؤثرات لأي نوع من أنواع عناصر صفحات الويب كالنصوص، الصور، الإطارات، الأزرار، والبطاقات والعديد غيرها.

تأثيرات إبداعية لإضافة وإزالة عناصر قائمة باستخدام تحريكات CSS

يشرح هذا المقال استخدام الحركات (animations) والانتقالات (transitions) في CSS3 لإعطاء تأثيرات عند إضافة أو إزالة عناصر من قائمة بالإستعانة بتقنية التخزين المحلي للمتصفح، إذ من الضروري أن يكون للانتقالات والحركات هدف واضح ومحدّد، ألا وهو تحسين تجربة المستخدم.

كيفية إنشاء قائمة تنقل دائرية باستخدام CSS Transforms

يعلمك هذا المقال كيفية إنشاء قائمة تنقل (navigation) دائرية الشكل باستخدام الانتقالات في CSS. يراعي المقال شرح ذلك خطوة بخطوة بالإضافة إلى الحسابات والمنطق البسيط وراء هذه الطريقة حتى يتسنى لك فهم كيفية عمل هذه القائمة المميزة. 

استخدام المحدد target: ضمن CSS لإنشاء تأثيرات واجهة المستخدم UI بدون JavaScript

يشرح هذا المقال كيفية استخدام المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما، إذ يتم تطبيق هذه التنسيقات على العنصر الهدف عند النقر على ذلك الرابط بدون اللجوء لاستخدام JavaScript. يشرح المقال أيضًا كيفية استعمال الخاصية animation لتطبيق تنسيق ما بشكل متدرج.