تصميم مواقع الويب | كيف تضيف الحركية لعناصر الصفحة باستخدام الجافاسكريبت

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

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

يمكنك تحميل آخر إصدار للإضافة من هنا :

 رابط التحميل 

بعد تحميل الإضافة وفك الضغط عن المجلد تظهر الملفات بهذا الشكل:

طبعا لن نحتاج لكل هذه الملفات ، فقط سندخل على مجلد dist وننسخ ملف wow.min.js ونضعه مع ملفات مشروعنا ثم ندخل على مجلد css ونأخذ نسخة من ملف animate.css ونضعه أيضا مع ملفات مشروعنا الخاص.

بعد ذلك نقوم بتضمين هذه الملفات في ملف html الخاص بنا ، ملف css في head وملف الجافاسكريبت أسفل الصفحة قبل قفلة body.

الخطوة التالية هي كتابة كود الجافاسكريبت التالي في ملف الجافاسكريبت الخاص بنا، مثلا في الصورة السابقة ملف main.js الخاص بي.

الخطوة الأخيرة إضافة الكلاسات ، أولا الكلاس wow ثم الكلاس slideInLeft أو الكلاس slideInRight حسب الجهة التي نريد أن تبدأ منها الحركة.

ويمكننا إضافة Attributes أيضا : 

- data-wow-duration وهنا نضع القيمة بالثواني لتحديد المدة التي تنفذ فيها الحركة.

- data-wow-delay وهنا نضع أيضا القيمة بالثواني لتحديد مدة الإنتظار قبل تنفيذ الحركة.

شاهد الفيديو التالي للمزيد من التوضيح:

دمتم في رعاية الله وحفظه.