شرح بالصور اضافة اداة مشاهدة صفحات الفيسبوك لمدونتك - Blogger to facebook

هي مكتبه بلغة الجافا اسكربت 

( javascript) 

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

 ( open source )

Now your animations will be revealed when the user scrolls.

 تقوم باضافة تاثير انميشن ( animation css ) للعناصر المختلفه بالموقع اثناء عمل ال ( scrolling ) بطريقه سهله وبسيطه  سوف نتناول شرحها في هذه المقاله بالصور:-

- اولا تنزيل المكتبه :- 
تتكون المكتبه من عدد 2 ملف للتنزيل 
- ملف الجافا سكريبت يتم تنزيله من ---- اضغط هنا لتنزيل المكتبه
- ملف ( css ) يتم تنزيله من -----اضغط هنا للتحميل

- ثانيا الاستخدام :-

• يتم فك ضغط الملفين 
• من الملف الاول نحصل علي نسخه من ملف الجافا سكريبت ( wow.js ) الموجود بالمكتبه ومساره الاتي 

\WOW-master\dist

• من الملف الثاني نحصل علي نسخه من ملف الاستيل ( animate.css ) الموجود بالمكتبه ومساره الاتي 

\animate.css-master

• يتم نسخ الملفين ووضعهما في ملف المشروع .

• يتم ربط الملفين بملف ( index.html ) للمشروع او اي ملف تريد اضافة هذه التأثيرات عليها عن طريق الكود التالي الجزء الخاص ( header ) 

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

• ثم الملف الثاني في نهاية الجزء الخاص ( body ) وقبل ملف الجافا سكريبت الرئيسي 

• <script src="js/wow.min.js"></script>

• يتم تغير الجزء ( css/animate.css ) و ("js/wow.min.js") طبقا للمسار الخاص بملف المكتبه بالمشروع.
• يتم وضع الكود التالي بعد ربط ملف الجافا سكريبت

       <script src="js/wow.min.js"></script>

       <script>

       new WOW().init();

       </script>

• الذهاب لصفحة المكتبه وبها عرض لجميع التاثيرات الموجوده بالمكتبه - هنا 
• نختار التاثير المطلوب مثل bounceOut

• ننسخ اسم التاثير 
• نذهب للعنصر المراد اضافة التاثير عليه 
• ثم نكتب له كلاس ( wow animate__animated animate__bounceOut ) باسم التاثير مع تغيير الاتي في الاسم 
•  نضيفة كلاس (wow)فيصبح كالاتي 

wow animate__animated animate__bounceOut

<div class="wow animate__animated animate__bounceOut">

  

</div>

ملحوظه :-

ممكن نغير بعد الخصائص في التاثير مثل مدة ونقطة البدايه بالتعديل في  ال (attribute) التاليه:-

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

مثال لذلك

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">

 </section> 

<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"> 

</section>

ونجرب ونستمتع بالتاثيرات 

***********************************

وفي نهايه نسئلكم الدعاء 

انتظار تعليقاتكم

---