Animation css

موضوع اول مفتح صفحة العناصر تيجي من يمين و عناصر تيجي من شمال و عناصر صغيرة تكبر ده ب css فقط ولا bootstrap و ياريت لو فيه طريقة للتدريب علي موضوع ده
مع علم مستخدمتش bootstrap قبل كده

1 Like

مرحبا محمد،

بالإمكان تحقيق ذلك بالـ CSS ولكن أفضل نتيجة تاتي من دمج إمكانيات لغة الـ CSS ولغة الـ Javascript.

اما بالنسبة للـ bootstrap فليس لها أي علاقة بالأمر فهي مجرد إطار عمل يسهل لك عملك في عمل مواقع تجاوبية.

كيف تقوم بعمل هذه الحركة على العناصر؟

سنتطرق لذلك لاحقاً حيث انه من ضمن خطة المسار الـ Animation وغيرها. لكن في الوقت الحالي سأشرح لك كيف بإمكانك إضافة مثل هذه التأثيرات على عناصر صفحتك بكل سهولة.

المتطلبات:

  • سنقوم بتحميل مكتبة إسمها wow.js والتي ستكون مسؤولة عن مساعدتنا لإضافة التأثيرات على العناصر عند عمل scroll في الصفحة.
  • سنقوم بتحميل Animate.css والتي ستقوم بتوفير حراكات الـ Animation بلغة الـ CSS.

قمت بتحميلها وتجهيزها لك بإمكانك تنزيلها من الرابط التالي:

خطوات العمل:

1- سأقوم بإنشاء صفحة HTML تحتوي على قسمين بداخل كل قسم عنصر بتنسيقات محددة عشان نجرب عليها التأثيرات بالشكل التالي:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animation</title>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      background: blueviolet;
      border-radius: 50%;
      margin: 50px auto;
    }
    .rectangle{
      width: 200px;
      height: 100px;
      background: chocolate;
      margin: 50px auto;
    }
    section {
      height: 1000px;
    }
  </style>
</head>

<body> 

  <!--العنصر الأول-->
  <section>
    <div class="circle"></div>
  </section>

   <!--العنصر الثاني-->
  <section>
    <div class="rectangle"></div>
  </section>
 
</body>

</html>

لاحظ أنه في التنسيقات قمت بإعطاء الـ section إرتفاع بقيمة كبيرة الي هي 1000px عشان يختفي عن أنظارنا ونضطر نعمل scroll down عشان نشوفة.

النتيجة:


2- سأقوم بربط الصفحة بملفي wow.main.js و animate.css.

  • ملف animate.css سيكون بداخل مجلد بإسم css بجوار صفحة الـ HTML لهذا سأقوم بإستخدام عنصر link كالتالي:
<link rel="stylesheet" href="css/animate.css">
  • ملف wow.min.js سيكون بداخل مجلد بإسم js بجوار صفحة الـ HTML لهذا سأقوم بإستخدام عنصرscript كالتالي:
<script src="js/wow.min.js"></script>

الأكواد كاملة:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animation</title>

   <!--هنا أكواد الربط-->
  <link rel="stylesheet" href="css/animate.css">
  <script src="js/wow.min.js"></script>

  <style>
    .circle {
      width: 100px;
      height: 100px;
      background: blueviolet;
      border-radius: 50%;
      margin: 50px auto;
    }
    .rectangle{
      width: 200px;
      height: 100px;
      background: chocolate;
      margin: 50px auto;
    }
    section {
      height: 1000px;
    }
  </style>
</head>

<body> 

  <!--العنصر الأول-->
  <section>
    <div class="circle"></div>
  </section>

   <!--العنصر الثاني-->
  <section>
    <div class="rectangle"></div>
  </section>
 
</body>

</html>

3- سأقوم بعمل تهيئة لمكتبة wow بكتابة كود الـ Javascript التالي:

<script>
    new WOW().init();
</script>

قم بوضع هذا الكود تحت كود ربط ملف wow.min.js هكذا:

<!--هنا أكواد الربط-->
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
<script>
    new WOW().init();
</script>

4- إبدأ بإستخدام المكتبتين لإضافة التأثيرات.

طريقة إضافة التأثيرات لكل عنصر:

1- إيجاد التأثير المناسب
بكل بساطة راح تروح على موقع
https://daneden.github.io/animate.css/
ومن ثم ستقوم بإختيار التأثير الذي تريد وتقوم بتجربته.

مثلاً:
أخترت التأثير bounceInUp

حتى أقوم بتطبيق هذا التأثير للعنصر الأول والذي هو الدائرة، راح اروح للـ class واضيف الكلاس wowمتبوعاُ بإسم التأثير كـ class أخر، بالشكل التالي:

<!--العنصر الأول-->
<section>
   <div class="circle wow bounceInUp"></div>
</section>

الأن قم بعمل تحديث للصفحة ستجد النتيجة بالشكل التالي:

تأخير ظهور التأثير:

كما تلاحظ تم إضافة تأثير دخول العنصر الأول بمجرد تحديثنا للصفحة، لكن أحيانا تريد أن يتأخر العنصر لنقل لمدة 2 ثواني ومن ثم يظهر.

كيف نحقق ذلك؟
سنقوم بإضافة الـ attribute الذي توفرة wow.js للقيام بعملية التأخير وهو data-wow-delay

<section>
   <div class="circle wow bounceInUp"  data-wow-delay="2s"></div>
</section>

قم بتجربة ذلك.

تحديد الموقع سيتم فيه إظهار العنصر.

أحياناً تريد أن تجعل المستخدم يقوم بعمل scroll down بمقدار معين من الصفحة قبل أن يتم إظهار العنصر.

كيف نحقق ذلك؟
سنقوم بإضافة الـ attribute الذي توفرة wow.js للقيام بتحديد النقطة التي سيتم فيها إطلاق التأثير وهو data-wow-offset

إستكشف ذلك
كل هذه الخيارات تم شرحها في الـ docs الخاصة بـ wow.js
https://wowjs.uk/docs.html

قم بالإطلاع عليها وإذا تريد أن نمر عليها مع بعض اخبرني.

الكود الخاص بي

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animation</title>

  <!--هنا أكواد الربط-->
  <link rel="stylesheet" href="css/animate.css">
  <script src="js/wow.min.js"></script>
  <script>
    new WOW().init();
  </script>

  <style>
    .circle {
      width: 100px;
      height: 100px;
      background: blueviolet;
      border-radius: 50%;
      margin: 50px auto;
    }

    .rectangle {
      width: 200px;
      height: 100px;
      background: #fff;
      margin: 50px auto;
    }

    .first-section,
    .second-section {
      height: 700px;
      padding: 150px;
    }
    .second-section{
      background: blueviolet;
    }
  </style>
</head>

<body>

  <!--العنصر الأول-->
  <section class="first-section">
    <div class="circle wow bounceInUp"></div>
  </section>

  <!--العنصر الثاني-->
  <section class="second-section">
    <div class="rectangle wow bounceInLeft" data-wow-offset="710"></div>
  </section>

</body>

</html>

النتيجة:

2 Likes

موضوع جميل جدا جدا و ممتع الف شكرا يا أ محمد و هيخلي الصفحه حيوية جدا جدا :slight_smile: :slight_smile:

1 Like
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

ايه فايدة السطرين دول

1 Like

بالفعل الصفحة تكون لها نكهة ثانية، لكن بإستخدامها بشكل بسيط وليس بشكل مبالغ فيه

الكود:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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


بينما الكود الأخر بإختصار تستطيع القول أنه من خلاله نقول لمتصفح Internet Explorer بأن يقوم بإستخدام أخر محرك rendering لعرض المحتوى على المتصفحات القديمة.

1 Like

شكرا ليك ا محمد انا عارف تعبتك معايا

1 Like

عفواً :blush:

ولا يهمك واجبي أجيب على تساؤولاتك

1 Like