السلام عليكم احبابي في الله، اليوم ان شاء الله سنقدم لكم موضوع بسيط وهو كيفية جعل خلفية الموقع ذات ألوان متعددة تظهر بشكل تناوبي،بواسطة سكريبت.
طريقة التركيب : اولا قم بالدذهاب الى تحرير 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('backgroundColor', initColor); setInterval(function(){ var color = shiftColor(); $el.animate({backgroundColor: color}, 3000); }, settings.speed); }); }); }; // Initialize $(function(){ $('body').animatedBG(); }); }(jQuery, window, document)); </script> بعد وضع الاكواد في مكانها قم بالضغط على حفذ النمودج مع ملاحظة أن اللون الذي تم وضعه أولا هو نفس اللون الذي تم وضعه مع الاكواد، في مثالنا هذا (91c9db#). القيمة speed هي القيمة المسؤولة عن سرعة التبديل بين لون و آخر، غيرها لأي قيمة تريد (مثلا 3000 تساوي 3 ثواني). |