تغيير ألوان الخلفية بشكل تناوبي

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

طريقة إضافتها:

قم أولا بتضمين ملفات الجافاسكربت التالية في موقعك او مدونتك قبل الوسم </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://rawgit.com/palmix/BPArabic/master/example/animated_bg.js"></script>

حدد بعد ذلك العنصر الذي تريد جعل خلفيته ذات ألوان متغيرة (يمكنك اختيار أي عنصر تريد، فئة، معرف، وسم من وسوم HTML).

على سبيل المثال لنقم بتطبيق الكود على الوسم body سنضع كود CSS التالي بملف التنسيق الخاص بك او قبل ]]></b:skin> في مدونات بلوجر:

body{
 background:#654b9e;
 color:#FFF;
}

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

الآن لم يبقى عليك إلا إضافة كود الجافاسكربت التالي قبل الوسم </head> (أضفه بعد الملفات السابقة):

<script type="text/javascript">
jQuery(document).ready(function(){
 $('body').animatedBG({
 colorSet: ['#654b9e', '#aad667', '#57e6ee', '#ff7ebb'],
 speed: 3000
 });
});
</script>

في هذا الكود لاحظ أننا قمنا بتحديد العنصر المراد تطبيق الحركة عليه (وهو العنصر BODY)، بعد ذلك قمنا بتحديد الألوان المراد ظهورها في الخلفية بشكل تناوبي (الترتيب هنا مهم، اللون الذي ستضعه بالأول هو الذي سيظهر أولاً، ثم الثاني، و هكذا…)، مع ملاحظة أن اللون الذي تم وضعه أولاً هو نفس اللون الذي تم وضعه بملف التنسيق، في مثالنا هذا (654b9e#).

القيمة speed هي القيمة المسؤولة عن سرعة التبديل بين لون وآخر، غيرها لأي قيمة تريد (مثلا 3000 تساوي 3 ثواني).

يمكنك أيضاً إضافة المزيد من الخلفيات لوسوم ومعرفات مختلفة في نفس الوقت ونفس الصفحة، على سبيل المثال سنقوم بإضافة الخاصية للفئات التالية:

<div class="animated_bg1">
  <div>animated_bg1</div>
</div>
<div class="animated_bg2">
  <div>animated_bg2</div>
</div>
<div class="animated_bg3">
  <div>animated_bg3</div>
</div>

سنقوم في هذه الحالة ببعض التعديلات

في كود الـ CSS سيكون على سبيل المثال كالتالي:

.animated_bg1 {
    background: #FF0000;
}
.animated_bg2 {
    background: #00B755;
}
.animated_bg3 {
    background: #000000;
    color: #ffffff;
}

في كود السكريبت سيكون كالتالي:

<script>
    jQuery(document).ready(function(){
        $('.animated_bg1').animatedBG({
            colorSet: ['#FF0000', '#aad667', '#57e6ee', '#ff7ebb'],
            speed: 2000
        });
        $('.animated_bg2').animatedBG({
            colorSet: ['#00B755', '#b15c8e', '#dc6b68', '#6c5a94', '#b14c4e', '#736357'],
            speed: 4000
        });
        $('.animated_bg3').animatedBG({
            colorSet: ['#000000', '#57e6ee', '#736357', '#aad667', '#aad667', '#b14c4e'],
            speed: 6000
        });
    });
</script>

لاحظ أننا قمنا بإضافة الألوان وسرعة تبديلها لكل فئة بشكل مختلف عن الفئة الأخرى (الفئات:animated_bg1,animated_bg2,animated_bg3)

الكاتب : غير معرف

الروسافي عمر مغربي الجنسية العمر 15 سنة أحب التدوين في البداية عملت على اكتشاف الويندوز والحماية و الاختراق وغيرها من المجالات لكني أحببت التدوين ودخلت في مجال التدوين