كيفية اضافة التأثيرات الحركيةCSS Animation لعناصر مدونتك بشكل رهيب جدا جدا أنصحك بالدخول

بــســم الله الرحمن الرحيم

((ولا تحسبن الله غافلا عما يعمل الظالمون

إنما يؤخرهم ليوم تشخص فيه الأبصار مهطعين

مقنعي رءوسهم لا يرتد إليهم طرفهم وأفئدتهم هواء))

صدق الله العظيم

اهلاً بكم زوار ومتابعي المدونة الكرام

اليوم درسنا سنتعرف علي كيفية اضافة التأثيرات الحركيةCSS Animation لعناصر مدونتك بشكل رهيب جدا

مجال التأثيرات الحركية مجال واسع جداً ومن الصعب ان يتم شرحه بالكامل لأنه يعتمد على جزء كبير في لغة CSS لكن هناك حل سهل وبسيط يعتمد عليه أغلب المستخدمون للتأثيرات وهو عبر التأثيرات الجاهزة

لهذا جلبت لكم هذا الموقع لمعاينة التأثيرات التي تريد تطبيقها علي مدونتك او علي عناصر مدونتك او علي صور مدونتك بأشكال حلوة وجميلة جدا ورائعه

اولا الدخول للموقع التالي :

http://mohamedabodia.github.io/dabourphone

كيف يمكن عمل تلك التأثيرات وجعلها تعمل في مدونتي ؟؟

إليك الآتي :

أول شئ استخدم الكود التالي اسفل الوسم <head>
<link href='//cdn.rawgit.com/MohamedAbodia/dabourphone/master/Animated.css' rel='stylesheet' type='text/css'/>

<script src='//googledrive.com/host/0B38VxVtxtadTQzJIMkxLQ0pmUnM/wow.js' type='text/javascript'/>

الآن لتتمكن من استخدام التأثيرات في مدونتك كل ما عليك فعله هو استخدام الكلاس التالي

"#class="wow animated

رمز # يستبدل بإسم الحركة

مثال لو لدينا صورة نريد ان نطبق عليها الحركة سيصبح كودها كالتالي
<img class="wow animated asd" src="http://1.bp.blogspot.com/-x6u3f279vRY/VsO2WgtnUhI/AAAAAAAACH8/6wQlSfJNMQE2r0r4PZ7mHeCWj1Jl a7KqACKgB/s1600/300x250.png"/>

كما تلاحظ كلمة asd هي إسم الحركة

- كيف نحصل على اسم الحركة ؟

من الموقع التالي والذي ادرجته لكم بالاعلي

http://mohamedabodia.github.io/dabourphone

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

مثال آخر لو اردنا تطبيق حركة معينة على مواضيع المدونة بحيث كلما تم التمرير لأسفل يحدث التأثير على الموضوع

أغلب قوالب بلوجر تعتمد على هذا الكود كحاكم للمواضيع

<div class='post-outer'>

كل ما عليك فعله تطبيق الكود فيصبح

<div class='post-outer wow animated fadeInUp'>

طبعا يمكنك تعديل التأثير الحركي بالتأثير الذي تريد

ملحوظة

قد يكون الكود متكرر في القالب فيجب التطبيق عليهم جميعا أو التجربة حتى تجد الصحيح

الموضوع من قسم:

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

عن الموقع

العباقرة العرب

مدونه مختصه بكل ما هو جديد
في عالم التكنولوجيا والاجهزة النقالة