مساحة إعلانية

السبت، 21 نوفمبر، 2015

السبت، 21 نوفمبر، 2015

شرح التأثيرات الحركية CSS Animation

CSS Animation Scroll wow jsمجال التأثيرات الحركية مجال واسع جداً ومن الصعب ان يتم شرحه بالكامل لأنه يعتمد على جزء كبير في لغة CSS لكن هناك حل سهل وبسيط يعتمد عليه أغلب المستخدمون للتأثيرات وهو عبر التأثيرات الجاهزة 
وهذا الشرح والكود إعداد حصري لكن مدون 
 من المعاينة التالية يمكنك رؤية مثال تقريبي لفكرة عمل هذه التأثيرات شاهده ولا تنسى التمرير لأسفل حتى نهاية الصفحة لترى بعض التأثيرات

كيف يمكن عمل تلك التأثيرات ؟

أول شئ استخدم الكود التالي في قالبك
<link href='http://cnmu.googlecode.com/svn/trunk/2015/animate.css' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B9wf6r4PTnMianRNWmU0VFdhVHc' type='text/javascript'/>

كل ما عليك فعله هو استخدام الكلاس التالي
class="wow animated #"
رمز # يستبدل بإسم الحركة
مثال لو لدينا صورة نريد ان نطبق عليها الحركة سيصبح كودها كالتالي
<img class="wow animated tada" src="http://4.bp.blogspot.com/-kn4NCtJwHP4/UP2GHRDFULI/AAAAAAAAAVU/QaSbNEQnyOA/s1600/256%25D8%25A1256.png"/>
كما تلاحظ كلمة tada هو إسم الحركة

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

ببساطة من الموقع التالي
http://daneden.github.io/animate.css
ستجد معاينة لكل الحركات وأسمائها فقط اكتب اسم الحركة وطبقه على ما تريد يجب أن تكتب الإسم مضبوط
إضغط هنا لفتح قائمة أسماء قابلة للنسخ
مثال آخر لو اردنا تطبيق حركة معينة على مواضيع المدونة بحيث كلما تم التمرير لأسفل يحدث التأثير على الموضوع
أغلب قوالب بلوجر تعتمد على هذا الكود كحاكم للمواضيع
<div class='post-outer'>
كل ما عليك  فعله تطبيق الكود فيصبح
<div class='post-outer wow animated fadeInUp'>
طبعا يمكنك تعديل التأثير الحركي بالتأثير الذي تريد
ملحوظة قد يكون الكود متكرر في القالب فيجب التطبيق عليهم جميعا أو التجربة حتى تجد الصحيح

هناك 30 تعليقًا:

  1. شكرااااااااااااااا لقد انتضرت هادا الموضوع لوقت طويل اخي (: كان يبدوا لي ان هاده الحركات تستخدم بلغة jquery

    ردحذف
    الردود
    1. ^_^ معذرة على التأخر لكن مشاغل الحياة تأخذنا منكم قليلاً
      بالتوفيق

      حذف
  2. جميل لاكن ممكن طريقة رفع علي موقع github

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

      حذف
    2. لا هتفيد المدونين الي بيعربو او بيطورو القوالب هيحجوها في رفع ملفات js او ملفات الحقوق وكدا وانتا عارف بقا =D

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

      حذف
  3. السلام عليكم
    بصراحة أول مدون في العالم العربي هو أنت أخي"كن مدون" أنت من اهل الفردوس إن شاء الله
    نستفيد منك لنواصل مهامنا ♥
    نحبك في الله ونتمنى مواصلة مشوارك
    محبكم من الجزائر ♥

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      نسأل الله ان يجعلنا واياكم من اهل الفردوس
      تشرفت بمرورك وحيا الله اهل الجزائر الحبيب

      حذف
  4. موضوع رائع صديقي وشكراً على الشرح والوافي، شرح مميز ومبسط :)
    http://www.0prof0.com

    ردحذف
  5. شرح موفق وجميل ابدعت

    ردحذف
  6. بجد شرح ممتاز جزاك الله خير يا استاذ عمرو ربنا يباركلك يارب

    ردحذف
  7. رائع جدا بارك الله فيك

    ردحذف
  8. بارك الله فيك ممتاز اخي .. اتمني من حضرتك تغير رابط المعاينة عشان مش شغال

    ردحذف
    الردود
    1. وفيك بارك الله اخي الكريم
      مدونة المعاينة بها كل معاينات مدونتي تقريباً
      لكنها حذفت هناك طلب لإستعادتها وستعاود العمل بإذن الله
      حاليا يمكنك معاينة التأثيرات في موقع اسماء الحركات

      حذف
  9. تشرفت بمروركم اخواني الأفاضل
    تحياتي لكم جميعاً

    ردحذف
  10. السلام عليكم ورحمة الله
    كيف اطبفها على عنوان المونة.

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

      حذف
  11. اخى ممكن أسم التأثير الى حضرتك عملوا على صندوق التعليق

    ردحذف
    الردود
    1. أخي لو شاهدت التأثيرات في الرابط الذي وضعته ستستطيع تمييزه
      عموما هو flipInX
      وبالتوفيق

      حذف
  12. السلام عليكم اشكركم على هذه المدونة الرائعة.
    عندي مشكل في تركيب اقسام المدونة عندما أكتب تسمية من تسميات مدونتي. وأحفظ القالب وعندما اضعط على القسم لا ينتقل بي الى المحتوى المطلوب. علما اني حملت القالب من مدونتكم ولون القالب أخضر. ' ( القوالب الخمسة النمطية )

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أخي لو نظرت للقوالب في المعاينة ووجتها تعمل جيداً
      فتكون المشكلة لديك اما في المدونة او في الدومين المدفوع واعداداته ان كنت تستخدم واحد او انك عدلت على القالب تعديلات بها اخطاء فتسببت بالمشكلة

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

    ردحذف
    الردود
    1. يسرني أن الشرح أعجبك وأفادتك
      شكراً لمرورك العطر يا طيب

      حذف
  14. حضرتك لو انا عايز اطبق الكلاس ده على المدونه بالكامل اعمل ايه

    ردحذف
    الردود
    1. بعد الوسم <body> أضف هذا الكود وطبق عليه التأثير الذي تريد
      <div class="wow">
      وفوق الوسم
      </body>
      أضف هذا الكود
      </div>

      حذف
    2. حبيبي شكرا
      جاري التجربه

      حذف
  15. اخى انا فى مدونى اريد اضيف التاثير على المدونه بالكامل
    ولكن انا القالب لا يوجد به وسم <body>
    مع العلم أن وسم </body> يوجد فى القالب
    ما الحل اذا


    ردحذف
    الردود
    1. لا يمكن اخي ان لا يكون لديك وسم <body>
      لانه جزء رئيسي في الصفحة لكن قد يكون شكله متغير فإبحث فقط عن هذا الجزء <body

      حذف
    2. وجده اخى
      ولكن كيف اجهله مثل مدونتك عند النزول للاسفل يعمل التاثير

      حذف
    3. اخي انا ذكرت هذا في نهاية الموضوع راجعه جيداً لن يعمل فقط في حالة كانت مواضيع مدونتك بكلاسات اخرى فعليك ايجادها

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©