اخر مواضيع زاكي

زاكي علالي

زاكي علالي , مبرمج ومطور مواقع محترف بشهادة ومدون ذو خبرة كبيرة لمدة 6سنوات في التدوين و تصميم قوالب بلوجر وغيرها،اتمنى ان اقدم لكم الافضل...

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

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


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

اولا قم بالدذهاب الى تحرير 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 تساوي ثواني).



ليست هناك تعليقات:

إرسال تعليق

صفحة نجمة الرسمية

قناة نجمة الرسمية

الأكثر تصفحا

جميع الدورات

{"type":"footer-slider","label":"جميع الدورات","posts_number":"12"}

نجمة :

أحيانًا، عليكَ أن تلقِ نظرة على ماضيك، وتبتسم برضا على ما وصلت إليه