لوحة المتصدرين

كتابة برنامج يطبع العبارة "مرحبا بالعالم!‎" وتنفيذه هو أحد التقاليد الأساسية في مجال البرمجة، ويشكل أول برنامج بسيط وكامل للمبتدئين، وكذلك يُعدُّ اختبارًا لأنظمة وبيئات البرمجة، كما يعطي البرنامج فكرة عن الصياغة الأساسية للغات البرمجة. ستتعلم في هذه المقالة كيفية كتابة برنامج "مرحبا بالعالم!" في بايثون 3. المتطلبات الأساسية يجب أن يكون لديك بايثون 3 مثبتًا، بالإضافة إلى إعداد بيئة برمجة محلية على حاسوبك. إن لم تكن قد ثبَّت بايثون وأعددت البيئة البرمجة، فعد إلى الدرس السابق واتبع الخطوات اللازمة لإنجاز ذلك قبل إكمال هذا الدرس. مرحلة كتابة البرنامج لكتابة البرنامج "مرحبا بالعالم!‎"، سننشئ ملفًا جديدًا باسم hello.py، ثم نفتحه بمحرر نصوص لسطر الأوامر، (مثل nano الموجود على أنظمة لينكس): nano hello.py إن لم يكن لديك المُحرِّر nano، فأنشئ الملف hello.py وافتحه باستعمال أي محرِّر موجود على نظام التشغيل لديك (مثل المفكرة على أنظمة ويندوز). بمجرد فتح الملف النصي في نافذة الطرفية (أو محرِّر النصوص)، سنقوم بكتابة برنامجنا فيه وذلك بكتابة التعليمة البرمجية التالية: print("مرحبا بالعالم!‎") دعنا نشرّح هذه التعليمة. print()‎ هي دالة (function) تخبر الحاسوب بتنفيذ إجراء ما. نعرف أنَّها دالة لأنها تستخدم الأقواس. تطلب print()‎ من بايثون أن يعرض أو يخرج ما نضعه بين القوسين. بشكل افتراضي، ستُعرَض المُخرجات في نافذة الطرفية عند تنفيذ البرنامج. بعض الدوال، مثل print()‎، هي دوال مُدمجة (built-in) في بايثون بشكل افتراضي. هذه الدوال المدمجة متوفرة لنا دائمًا لاستخدامها في برامجنا. يمكننا أيضًا تعريف دوالنا الخاصة وبناءها من عناصر أخرى. داخل قوسي الدالة print()‎ توجد سلسلة من الأحرف - مرحبا بالعالم!‎‎ - محاطة بعلامتي اقتباس. وهذه الأحرف الموضوعة بين علامات الاقتباس تُسمى سلاسل نصية (strings) وهي أحد أنواع البيانات التي سنتعرف عليها لاحقًا. بعد الانتهاء من كتابة البرنامج، يمكنك الخروج من nano عن طريق الضغط على ctrl+x، وعندما يُطلب منك حفظ الملف، اضغط على y. بعد الخروج من المُحرِّر nano، ستعود إلى نافذة الطرفية. دورة تطوير التطبيقات باستخدام لغة Python احترف تطوير التطبيقات مع أكاديمية حسوب والتحق بسوق العمل فور انتهائك من الدورة اشترك الآن مرحلة تنفيذ البرنامج بعد الانتهاء من كتابة برنامج "مرحبا بالعالم!‎"، فنحن جاهزون لتنفيذه. سنستخدم الأمر python3 معقوبًا باسم ملف البرنامج: python3 hello.py سيعرض برنامج hello.py الذي أنشأته للتو المخرجات التالية على نافدة الطرفية: مرحبا بالعالم!‎ دعني أشرح لك ما فعله البرنامج بمزيد من التفصيل. في الشيفرة البرمجية، مررنا السلسلة النصية مرحبا بالعالم!‎‎ إلى الدالة print()‎ التي وظيفتها طباعة ما يُمرَّر إليها على مجرى الخرج (نافذة الطرفية في حالتنا هذه). في هذا المثال، السلسلة النصية مرحبا بالعالم!‎‎ تُسمى أيضًا وسيطًا (argument)، نظرًا لأنها قيمة مُمرّرة إلى دالة. علامتا الاقتباس اللتان تحيطان بالسلسلة النصية مرحبا بالعالم!‎‎ لن تُطبعا على الشاشة لأنهما تُستخدمان لإعلام بايثون بأنّهما تحتويان على سلسلة نصية. تُحدِّد علامتا الاقتباس مُبتدأ السلسلة النصية ومنتهاها. بعد تنفيذ البرنامج، يمكنك الآن التأكد من أنّك نجحت في تثبيت بايثون 3، وأنّ البرنامج مكتوب ومُصَاغ صياغةً صحيحة. الخلاصة تهانينا! لقد أتممت كتابة أول برنامج لك، برنامج "مرحبا بالعالم!‎"، في بايثون 3. من الآن وصاعدًا، يمكنك استخدام الدالة print()‎ لعرض أية عبارات نصية أو قيم أخرى، ويمكنك أيضًا إنشاء ملفات برامج جديدة وتنفيذها بالطريقة ذاتها. لتعلم المزيد حول لغة بايثون، ننصحك بمتابعة سلسلة مقالات عن كيفية البرمجة في بايثون 3، والتي تأخذك خطوةً بخطوة لتعلم كيفية تثبيت بايثون وإعداد بيئة البرمجة، إضافةً إلى المفاهيم الأساسيات للغة، وأنواع البيانات والدوال والأصناف والبرمجة الكائنية وغيرها من المفاهيم؛ كما وفرنا دورةً تعليمية شاملةً حول تعلم التطوير واحترافه عن طريق لغة بايثون، وذلك انطلاقًا من الصفر إلى الاحتراف، وهذا في دورة تطوير تطبيقات باستخدام لغة بايثون، التي تمكّنك من تعلّم التطوير بلغة بايثون للتطبيقات ولمواقع الويب بالاعتماد على النظريات السليمة والتطبيق العملي والدعم المباشر. ترجمة -وبتصرّف- للمقال How To Write Your First Python 3 Program لصاحبته Lisa Tagliaferri اقرأ أيضًا المقالة اللاحقة: كيفية استخدام سطر أوامر بايثون التفاعلي المقالة السابقة: كيفية تثبيت بايثون 3 وإعداد بيئتها البرمجية المرجع الشامل إلى تعلم لغة بايثون تعرف على أبرز مميزات لغة بايثون كتاب البرمجة بلغة بايثون

هنيئًا لك، لقد أنهيت سلسلة أساسيات التحريك في 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! آمل أنك استمتعت بها واستفدت منها. إضافة الحركات ستجعلك مصممًا أفضل، وتجعل مشاريعك متميزة وجذابة. المصادر ترجمة وبتصرف للفصل now you know css animation من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة السابقة: قابلية الوصول المرجع الشامل إلى التحريك عبر CSS النسخة العربية الكاملة من كتاب: التحريك عبر CSS

تعلّمنا في المقالات السابقة مفهوم التحريك وكيفية إنشاء الحركات. قبل إنهاء هذه السلسلة، سنتريَّث قليلًا للتفكير فيما يمكننا القيام به للتأكد من أنَّ الزائرين سيستفيدون من الحركات التي نضعها في مواقعنا. هناك العديد من الطرق التي يمكن أن تساعد بها الحركات في عرض المحتوى، لكنها قد تكون مصدر إزعاج ومشاكل في بعض الأحيان. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة التأكد من سهولة الوصول إلى المحتوى حرّكنا في بعض الأمثلة المحتوى لإظهاره على الشاشة. إن كان المحتوى مخفيًا في البداية، فمن الضروري التنبّه إلى أنَّه لن يكون مخفيًا بالنسبة لبعض المستخدمين. أي يجب التأكد من وصول قارئات الشاشة إلى المحتوى المخفي بالنسبة لكفيفي البصر على سبيل المثال لا الحصر. تدعم المتصفحات القديمة الحركات المصممة عبر CSS بدرجات متفاوتة، وقد لا تعمل JavaScript دائمًا (أي لا تكون مفعَّلة على جميع المتصفحات). يمكننا استخدام أدوات مثل Modernizr لتجاوز مثل هذه المشكلات. نستخدم الحركات لإضفاء معانِي معيّنة على تصميماتنا. عند تصميم الحركات، ضع في حساباتك أنّ بعض الأشخاص لن يتمكنوا من رؤيتها. فربما يستخدمون قارئ الشاشة (screen reader)، أو أنَّ إعدادات متصفحاتهم تمنع عمل الحركات بالشكل المطلوب. تأكد من توفر المعلومات المهمة حتى في حال لم تعمل الحركة. كما أنّ التشغيل الفيديو تلقائيًّا قد يكون مصدر إزعاج لبعض المستخدمين، ويمكن أن تؤدي الحركات التي تعمل تلقائيًا إلى تشتيت الانتباه عن بعض محتويات الصفحة. حاول حصر استخدام الحركات في المواقف التي تريد من زوّاك أن يركِّزوا على محتوى معين. قد يعني هذا أيضًا تحديد المدة التي تستغرقها الحركة، أو التأكد من توقفها حتى يركِّز الزائر على محتويات أخرى. إتاحة التحكم توصي منظمة W3C بأن يكون لأي محتوى يومض (blinking)، أو يُمرَّر، أو يُحدَّث تلقائيًا لمدة تزيد عن 5 ثوانٍ وسيلة لإيقاف الحركة مؤقتًا، أو إزالتها. يُعد استخدام الخاصية animation-play-stat إحدى طرق إيقاف الحركة عند الحاجة، كما هو موضح هنا عند التمرير. إتاحة مدخلات بديلة يستخدم نسبة كبيرة من زوار موقعك الهواتف التي لا تحوي مؤشر (فأرة)، ولا توجد بها حالة حومان (hover state)، لذا من المهم أخذ هذا في الحسبان عند التصميم. أحد الخيارات التي أستخدمها غالبًا هو رصد النقرة (tap) وإضافة الصنف "active" إلى العنصر المنقور. بعد ذلك أُضيف الانتقالات أو الحركات إلى الحالات '‎:hover' و '‎.active'. الارتباك في بعض الأحيان، تبالغ بعض المواقع عبر تحريك كل شيء. هذا لن يقوَض رسالة الموقع فحسب، بل يمكن أن يسبب ارتباك الزائر. هذا ينطبق بشكل خاص على واجهة المستخدم. عند إضافة حركةٍ إلى عناصر الصفحة التي يتفاعل معها الزوار، تأكد من أنّ هناك سببًا وجيهًا لاستخدام الحركات. لا يملك الزوار الوقت الكافي لتفكيك شيفرات ورموز التصميمات المعقدة المرئية أو الطريقة التي تتحرك بها، لذلك تحرّى الوضوح والبساطة قدر الإمكان. لا تزعجني المبالغة في تطبيق الحركات أو استخدام النوع الخاطئ منها يمكن أن يزعج الناس. عندما قدمت Apple نظام التشغيل iOS7، وهو نظام تشغيل مُحدَّث لهواتفها، أدخلت فيه الكثير من الحركات. بعضها كان مزعجًا. وقد كافح بعض الأشخاص، مثلي، للقراءة في السيارة أو الحافلة، لأنّ الحركة كانت مربكة، وآخرون عجزوا عن لعب ألعاب فيديو معينة لأكثر من بضع دقائق. سبب حدوث ذلك يرجع إلى الطريقة التي يعمل بها نظامنا الدهليزي. لدينا 3 أنابيب في آذاننا تساعدنا على تحديد مكان رأسنا في الفضاء ثلاثي الأبعاد. من الممكن أن نخدع عقولنا ونوهمها بأننا نتحرك، بيْد أنّ المشكلة هي أنه عندما لا يحسّ النظام الدهليزي بتلك الحركة، وسنشعر آنذاك بالدوار والارتباك. التقيؤ عملية معقدة، وهناك جزء من أدمغتنا متخصص في التعامل معه. يقع هذا الجزء من الدماغ بالقرب من الجزء الذي يتعامل مع التوازن، ولهذا نشعر بالغثيان. يمكن أن يصبح هذا مشكلة أكبر مع تطور وانتشار التكنولوجيا القابلة للارتداء. تأكد عند تصميم الحركات من اختبار مدى ارتياح وتقبّل الناس لها. بعض الحلول أن تجرب الحركات التي تصممها مع أصدقائك وتأخذ رأيهم بها. يُعد موقع Vestibular.org نقطة انطلاق ممتازة للتعمق أكثر في هذا الموضوع. تسهيل الوصول للجميع قابلية الوصول ليست نافعة للأشخاص الذين يستخدمون قارئات الشاشة، أو وسائل بديلة لتصفح المحتوى وحسب. فكثيرًا ما يتشتت انتباهنا، إذ ينقطع ااتصال الشبكة، أو نتفحص هواتفنا أُثناء الانتظار في طابور مكتب البريد، أو نتفحص الاتجاهات أثناء القيادة. يجب أن ننتبه إلى الطرق التي قد يستخدم بها الناس مواقعنا، ونحرص على ألّا تكون الحركات التي ننشئها مزعجة أو مربكة لهم. تمرين إذا كانت وظيفتك تتضمن تصميم أو بناء واجهات لاستخدامها من قِبل الناس، فخصص بعض الوقت لقراءة NNGroup’s Animation for Attention and Comprehension. فكر في الكيفية التي قد يستخدم بها الناس موقعك، وما المشاكل التي قد يواجهونها إذا لم يتمكنوا من رؤية الحركات. المصادر ترجمة وبتصرف للفصل accessibility من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: نهاية الرحلة المقالة السابقة: إظهار المحتوى عند التمرير النسخة العربية الكاملة من كتاب: التحريك عبر CSS

من الاستخدامات الشائعة للحركات تحريك العناصر عند تمرير (scrolling) لأسفل الصفحة، لذلك سنتعلم في هذه المقالة كيفية القيام بذلك. إليك المثال التوضيحي الذي سنعمل عليه. حاول التمرير لأسفل الصفحة، وانظر كيف تظهر الاقتباسات وصور القطط في مكانها. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى الانتقالات: التنقل بين الحالات مدخل إلى الحركات: مفهوم الحركة تطبيق عملي: الانتقالات خاصيات الانتقالات دوال التوقيت الانتقالات المتعددة الانتقالات وجافاسكربت تطبيق عملي: التحريكات خاصيات الحركات تطبيق عملي: الإطارات المفتاحية الحركات المتعددة المتزامنة موجز الحركات رواية القصص عبر الحركات حرب النجوم إظهار المحتوى أثناء التمرير سهولة الوصول نهاية الرحلة الإطار Wow.js تعرض العديد من المواقع حركات مخصصة عند تمرير الصفحة إلى نقاط معينة. يمكن أن تبدأ بتشغيل مقطع فيديو، أو تشغيل إطارات تحريك مفتاحية معقدة، أو جعل بعض العناصر تظهر بالتدريج للفت الانتباه إليها. في جميع تلك الحالات، تُستخدم بعض شيفرات JavaScript، والتي تضيف صنفًا إلى عنصر معيّن عندما يصبح مرئيًا على الشاشة. يمكننا بعد ذلك إرفاق حركات مخصصة بذلك الصنف بشكل يؤدي إلى بدء المتصفح الحركة في الوقت المناسب الذي يظهر فيه العنصر أمام القارئ (الزائر). هناك العديد من خيارات JavaScript التي يمكن أن تضيف أصنافًا، وأحد أفضل هذه الخيارات الإطار Wow.js. سنستخدمه لإنشاء مثال بسيط يظهر فيه المحتوى تدريجيًا أثناء التمرير. استخدام Wow.js استخدام Wow.js يستلزم خطوتين. الخطوة الأولى هي تنزيل إضافة JavaScript. ضع الملف wow.min.js بعد تنزيله في مجلد JavaScript الخاص بالمشروع. الخطوة التالية هي الإشارة إلى هذا الملف من داخل شيفرة HTML: <script src="javascripts/wow.min.js"></script> (بافتراض أن المجلد يسمى javascripts - غيّره إلى الاسم المناسب) بعد ذلك، سنستدعي JavaScript باستخدام هذه التعليمة (الصقها بعد الشيفرة السابقة): <script> new WOW().init(); </script> يمكننا الآن إضافة الصنف "wow" إلى المحتوى، وسوف يكتفل الإطار Wow.js بتحديد ما إذا أصبح المحتوى مرئيًّا على النافذة أم لا لإظهاره بحركة لافتة. إضافة أصناف "wow" إن أردت تحريك عنصر معيّن عند التمرير، فأضف إليه الصنفَ wow: <p class="wow">...</p> هذا يعني أنه عندما يظهر العنصر في نافذة المتصفح أثناء التمرير للأسف ويصبح مرئيًّا، تضيف Wow.js الصنّف animated إلى المحتوى على النحو التالي: <p class="wow animated">...</p> إن أضفنا حركة مخصصة على العناصر p.animated (أي العناصر p ذات الصنف animated)، فلن تعمل الحركة إلا عند إضافة هذا الصنف. الإخفاء والعرض في مثالنا، سنخفي جميع العناصر ذات الصنف wow، وسنعرضها عندما يُضاف لها الصنف animated. أولاً، سنخفيها عبر الشيفرة التالية: .wow { opacity: 0; transition: all 0.5s 0.5s ease-out; } سنُطبِّق أيضًا عملية انتقال (transition) هنا حتى يظهر العنصر تدريجيًا. لاحظ القيمة 0.5s، في هذا المثال أضفنا تأخيرُا (delay) لمدة نصف ثانية، يضمن هذا أن يكون العنصر موجودًا في إطار العرض (viewport) قبل أن يبدأ بالظهور التدريجي. تحدد الشيفرة التالية كيف سيبدو العنصر عندما يُضاف إليه الصنف animated: .animated { opacity: 1; } صارت العناصر الآن تظهر ظهورًا تدريجيًّا في أثناء تمرير المستخدم الصفحة إلى الأسفل. شاهد ذلك في المثال الحي. استخدام Animate.css صُمِّم الإطار Wow.js ليتكامل مع إطار العمل Animate.css. لم أستخدمه في المثال حتى الآن لأني أفضِّل أن تفهم كيفية إنشاء الانتقالات بنفسك، لكن هناك بعض الانتقالات الممتازة الجاهزة التي يرفرها لنا الإطار Animate.css. في هذا المثال، استعملت Animate.css. لاحظ أنَّه لا توجد أيَّة حركات أو انتقالات في شيفرة CSS. بدلاً من ذلك، أضفت صنفًا إلى شيفرة HTML لإخبار Animate.css بالحركة الواجب تطبيقها: <section class="image wow bounceInUp"> يشير الصنف bounceInUp إلى أحد الحركات المضمّنة في Animate.css. إن اخترت "cog" في قسم CSS في المثال، فسترى أنني أشرت إلى إطار العمل Animate.css ضمن ملفات CSS الخارجية. استخدام Modernizr من الجيد عمومًا الاحتياط من المواقف التي نخفي فيها المحتوى ثمَّ نظهره باستخدام JavaScript. فبعض المستخدمين لا يشغّلون JavaScript لسبب أو لآخر. يمكن استخدام سكربت مثل Modernizr للتعامل مع هذه المشكلة. سيضيف صنفًا js إلى جسم الصفحة (body)، ويُمكننا بعد ذلك استخدامه في تنسيقاتنا. لقد أضفت Modernizr في هذا المثال فاطلع عليه بتفحُّص. تمرين يُعدُّ إظهار المحتوى تدريجيًّا في مكانه مع تطبيق حركة ما بداية رائعة، ولكن كيف يمكنك استخدام ذلك لتحسين تصميماتك ومواقعك؟ عندما تتصفح الإنترنت، ابحث عن المحتويات التي تظهر مع حركة أثناء التمرير لأسفل الصفحة وحلِّلها وحاول تقليدها. الأهم من ذلك، اسأل نفسك السؤال التالي وحاول الإجابة عليه: متى تكون هذه التقنية نافعة؟ ومتى يُفضل تجنّبها؟ المصادر ترجمة وبتصرف للفصل revealing content on scroll من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson. اقرأ أيضًا المقالة التالية: سهولة الوصول المقالة السابقة: حرب النجوم النسخة العربية الكاملة من كتاب: التحريك عبر CSS