شرح Animate.css وكيف يمكنها إضافة جمالية لموقعك؟

المقدمة

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

طريقة تنصيب Animate.css

سوف نقوم في البداية بتحميل ملف الـ CSS الخاص بالإضافة من خلال هذا الرابط ثم نقوم بحفظه داخل مشروعنا ثم نقوم بإستدعائه داخل وسم الـ head الموجود داخل اكواد الصفحة من خلال كتابة الكود التالي:

<link rel="stylesheet" href="/styles/animate.min.css">

لا تنسى تبديل هذا الجزء /styles/animate.min.css بمسار الملف الذي قمت بتحميله.

بعد ذلك نكون قد انتهينا من تركيب الإضافة على موقعنا وها نحن مستعدون لتجربة التحركات الرائعة التي يمكننا إضافتها لموقعنا

طريقة إستخدام Animate.css

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

سنختار الحركة المناسبة من خلال القائمة المنسدلة الموجودة وسط الصفحة ثم نقوم بنسخ إسمها (يجب نسخ او كتابة اسم الحركة بنفس الشكل المكتوبة فيه مع مراعاة الأحرف الكبيرة والصغيرة) على سبيل المثال سنختار الحركة التي تدعى tada ثم نعود الى الصفحة التي نعمل عليها ونذهب الى الجزء المطلوب تحريكه ونبحث عن الـ class داخل وسم العنصر المطلوب ونقوم بإضافة كلمة animated ثم إسم الحركة tada لتكون بهذا الشكل:

قبل:

<div class="mainloading">
    <div class="sk-folding-cube">
        <div class="sk-cube1 sk-cube"></div>
        <div class="sk-cube2 sk-cube"></div>
        <div class="sk-cube4 sk-cube"></div>
        <div class="sk-cube3 sk-cube"></div>
    </div>
</div>

بعد

<div class="mainloading animated tada">
    <div class="sk-folding-cube">
        <div class="sk-cube1 sk-cube"></div>
        <div class="sk-cube2 sk-cube"></div>
        <div class="sk-cube3 sk-cube"></div>
        <div class="sk-cube4 sk-cube"></div>
    </div>
</div>

بعد ذلك نقوم بتحديث الصفحة لنجد إنه تم تطبيق الحركة على العنصر الذي قمنا بإختياره وتحوله لشكل رائع!

ولتبسيط عملية نسخ اسماء الحركات قمنا بجمعها في قائمة واحدة كما هو موضح ادناه:

• bounce
• flash
• pulse
• rubberBand
• shake
• headShake
• swing
• tada
• wobble
• jello
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight
• hinge
• rollIn
• rollOut
• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

مراعات جانب السيو SEO وسرعة الموقع

اذا لم تكن لديك معلومة عن ما هو السيو SEO فنرجوا منك الرجوع الى هذه المقالة من اجل معرفة ما هو السيو بشكل مفصل.

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

وللدخول بتفاصيل اكثر في هذا الموضوع نفرض أنك قمت بإضافة وسم الـ Link الخاص بهذه الإضافة بداخل احد صفحات موقعك وقمت بإستدعاء حركة الـ tada فقط. حيث يرى الكثير من مبرمجين المواقع أن هذه الحالة هي حالة طبيعية ولا تؤثر على سرعة الموقع بل هو العكس، لأن هذه الإضافة تحوي على 47 حركة مختلفة ولكل حركة كود معين خاص بها موجود داخل الملف الذي قمنا بتحميله (Animate.css) وفي هذه الحالة نحن قمنا بتحميل ملف يحوي على 47 حركة وقمنا بإستخدام حركة واحدة منها فقط! المقصود توصيله لك في هذا الجزء من هذه المقالة هو ما لا تحتاجه لا داعي لوجوده في موقعك.

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

في مثالنا هذا نحن نستخدم فقط حركة الـ tada وفي هذه الحالة نريد حذف حركة الـ bounce بسبب عدم إحتياجنا لها في موقعنا، نقوم بفتح ملف animate.css ثم نقوم بالبحث عن كلمة bounce وسيكون الكود على الشكل التالي:

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

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

روابط مهمة

• رابط الموقع الرسمي للمشروع
• رابط المشروع على GitHub

الخلاصة

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