ما هي اضافة wow.js ؟ وكيف يمكنني الاستفادة منها ؟

هل دخلت إلى موقع ورأيت فيه حركة عناصر رائعة كلما قمت بالتمرير وتساءلت كيف يتم ذلك؟ هل ترغب بأن يكون موقعك مليئاً بالحركات الجذابة للزوار؟ إن هذا الأمر ليس بمعقد ويمكنك فعل ذلك بسهولة باستخدام إضافة wow.js التي سنشرحها اليوم لكم لتتمكنوا من استخدامها بسهولة والحصول على قفزة نوعية بموقعك لما تضفيه من جمالية وحركات جذابة.

ماهي اضافة wow.js ؟

اضافة wow.js هي اضافة بسيطة مكتوبة بلغة جافاسكريبت , لا تعتمد على jQuery او أي مكتبة أخرى ويمكنك استخدمها بدون اضافات , تستخدم اساساً لمنع تحميل العناصر حتى يتم الوصول اليها بالمتصفح , وتزيد فائدتها وتتضح عند استخدامها مع مكتبة Animate.css فلا يتم عمل الانيماشن الا عندما يصل المستخدم اليه , وليس عند تحميل الصفحة مباشرة , وفي هذه الصفحة سترون مثال مباشر عما يمكنك تحقيقه باستخدام اضافة wow.js مع مكتبة Animate.css

رابط المثال : https://wowjs.uk/ (وهو ايضاً رابط موقع الاضافة الرسمي)

كيف استخدم اضافة wow.js ؟

الخطوة الأولى التي يجب أن تقوم بها هي تضمين ملف الCSS الذي تعتمد عليه الإضافة ويمكنك تحميله من هنا (https://daneden.github.io/animate.css/) وتقوم بتضمينه في الكود الخاص بك:

<link rel="stylesheet" href="/path/to/your/file/animate.css"> 

الخطوة الثانية هي تضمين ملف wow.js الذي يمكن أن تقوم بتحميله من الرابط https://github.com/graingert/wow وتقوم بتضمينه:

<script src="/path/to/your/file /wow.min.js"></script>

الخطوة الثالثة هي جعل الإضافة فعالة بإضافة هذا الكود البسيط:

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

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

إذا أردت أن لا يتم تحميل العنصر حتى يصل المستخدم إليه أثناء التمرير فما عليك إلا إضافة اسم الصف wow للعنصر لتحقيق ما يسمى بlazy loading كما يلي:

<div class="wow">
  Your content here
</div>

لنبدأ الان بإضافة الحركات إلى العناصر وذلك بإضافة اسم صف يعبر عن الحركة التي تريدها مثلاً:

<div class="wow fadeIn">
  Your content here
</div>

يمكنك الاطلاع على الحركات التي يمكنك إضافتها عبر الرابط https://daneden.github.io/animate.css/ فنا عليك سوى أن تختار اسم الحركة لتشاهد تأثيره فوراً وبعدها تضيف الاسم مكان fadeIn....هل لاحظت مدى سهولة ذلك؟

يمكنك تحديد المدة التي تتم فيها الحركة في حال أردت أن تبدو بطيئة مثلاً أو سريعة جداً وذلك بإضافة خاصية data-wow-duration وإعطائها قيمة تقدر يالثواني مثلاً إذا أردت أن تستغرق الحركة 4 ثواني نكتب الكود بالشكل:

<div class="wow fadeIn" data-wow-duration="4s">
   Your content here
</div>

يمكنك تحديد المدة التي سيتأخر فيها العنصر قبل أن يظهر للمستخدم وتبدأ الحركة وذلك بإضافة خاصية data-wow-delay وإعطائها قيمة تقدر بالثواني مثلاً إذا أردت أن يبقى العنصر ثانيتين ثم تبدأ الحركة نكتب الكود التالي:

<div class="wow fadeIn" data-wow-duration="4s" data-wow-delay="2s">
   Your content here
</div>

يمكنك تحديد المكان الذي تريد أن يبدأ به العنصر بالحركة بإضافة خاصية data-wow-offset ويحدد هذا المكان نسبةً إلى أسفل المتصفح كمثال:

<div class="wow fadeIn" data-wow-duration="4s" data-wow-delay="2s" data-wow-offset="10">
   Your content here
</div>

يمكنك تحديد عدد المرات التي ستتكرر بها الحركة مثلاً إذا أردت تكرار الحركة 10 مرات:

<div class="wow fadeIn" data-wow-duration="4s" data-wow-delay="2s" data-wow-offset="10" data-wow-iteration="10">
   Your content here
</div>

يمكنك أيضاً تغيير بعض إعدادات هذه الإضافة فمثلاً لتغيير اسم الكلاس الافتراضي الذي يجعل العناصر تظهر عند تحريك المحتوى (wow) :

<script>
 new WOW().init({
   boxClass: 'myClass', // default wow
  });
</script>

ولا تنس عندها تغيير أسماء الكلااسات لعناصر HTML وتسميتها myClass بدلاً من wow

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

<script>
 new WOW().init({
 boxClass: 'myClass', // default wow
 offset: 10, // default 0
});
</script>

وهناك إعداد سهل ومفيد جداً لمن لا يحبون أن تبقى العناصر متحركة في الهواتف النقالة حيث أن الحركات افتراضياً تعمل ويمكن تغييرها إلى القيمة false:

<script>
   new WOW().init({
   boxClass: 'myClass', // default wow
   offset: 10, // default 0
   mobile: false, // default true
  });
</script>

وأخيراً فإن هذه الإضافة تتيح افتراضياً الكشف عن عناصر wow افتراضية في الصفحة ويمكنك جعل القيمة false:

<script>
   new WOW().init({
   boxClass: 'myClass', // default wow
   offset: 10, // default 0
   mobile: false, // default true
   live: false // default true
  });
</script>

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