سكريبت تغيير ألوان موقع بشكل تناوبي

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

معاينة

طريقة التركيب :

اولا قم بالدذهاب الى تحرير HTML بعد ذلك قمت بالبحث عن وسم </head>.

تانيا قم بنسخ الاكواد التالية فوق وسم </head>.

<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

<script src='https://rawgit.com/allalizaki/NAJMA-CODE-COLOR/master/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>

;(function($, window, document, undefined) {

$.fn.animatedBG = function(options){

var defaults = {

colorSet: [

'#91c9db', '#359bed', '#3c5b9b', '#d44132', '#cb2027'

],

speed: 3000

},

settings = $.extend({}, defaults, options);

return this.each(function(){

var $this = $(this);

$this.each(function(){

var $el = $(this),

colors = settings.colorSet;

function shiftColor() {

var color = colors.shift();

colors.push(color);

return color;}

// initial color

var initColor = shiftColor();

$el.css(&#39;backgroundColor&#39;, initColor);

setInterval(function(){

var color = shiftColor();

$el.animate({backgroundColor: color}, 3000);

}, settings.speed);

});

});

};

// Initialize

$(function(){

$(&#39;body&#39;).animatedBG();

});

}(jQuery, window, document));

</script>

بعد وضع الاكواد في مكانها قم بالضغط على حفذ النمودج

مع ملاحظة أن اللون الذي تم وضعه أولا هو نفس اللون الذي تم وضعه مع الاكواد، في مثالنا هذا (91c9db#).

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