Колір фону елементу у JavaScript задається за допомогою властивості Element.style.bacgroundColor.
Випадковий колір фону елемента
Створюємо функцію backroundColor яка буде приймати CSS селектор елемента(ів) в якому потрібно змінити колір фону і масив з кольорами у стилі CSS для вибору випадкового кольору.
backgroundColor=function(el,colors){
el=document.querySelectorAll(el);
colors=colors[parseInt(Math.random()*colors.length)];
for(i=0;i<el.length;i++)
el[i].style.backgroundColor=colors;
}
backgroundColor('#test',['red','blue','#32ae00','#ae3265']);
Випадковий колір фону веб-сторінки:
backgroundColor('body',['#FFDAB9','#F0F8FF','#778899']);
Плавна зміна кольору фону елемента від одного кольору до іншого за допомогою анімації Element.animate():
var el=document.getElementById('test2');
el.animate([{backgroundColor:'white'},{backgroundColor:'yellow'}],{duration:5500, fill:'forwards'});
Плавна багатоколірна зміна фону елемента за допомогою анімації Element.animate():
var el=document.getElementById('test3');
el.animate([{backgroundColor:'#ffffff'},{backgroundColor:'#E6E6FA'},{backgroundColor:'#778899'},{backgroundColor:'#6495ED'},{backgroundColor:'#4682B4'},{backgroundColor:'#66CDAA'},{backgroundColor:'#7CFC00'},{backgroundColor:'#32CD32'},{backgroundColor:'#EEDD82'}],{duration:10000, iterations:Infinity,});
Створимо функцію анімації кольору фону:
function bacbgoundColorAnime(selector, colors, ms){
var el=document.querySelector(selector);
var anime=[];
for(i=0;i<colors.length;i++)
anime[i]={backgroundColor:colors[i]};
el.animate(anime,{duration:ms, iterations:Infinity});
}
//анімація кольору фону веб-сторінки
bacbgoundColorAnime('body',['red','eccf73','blue','#e0e4ec','#a2c331','#e54da2'],10000);
Ефект градієнту кольору фону.
За допомогою CSS стилю box-shadow:
За допомогою CSS стилю box-shadow:
//додаємо до прототипу елементів метод backgroundColorGradient
HTMLElement.prototype.backgroundColorGradient=function(color1,color2){
this.style.background=color1;
this.style.boxShadow='0 -'+this.clientHeight+'px '+parseInt(this.clientHeight/2)+'px -'+parseInt(this.clientHeight/2)+'px '+color2+' inset';
}
document.getElementById('test4').backgroundColorGradient('blue','yellow');
Ефект градієнту кольору фону.
За допомогою CSS стилю background: linear-gradient:
За допомогою CSS стилю background: linear-gradient:
document.getElementById('test5').style.background='linear-gradient(to left, blue,yellow)';
На основі прототипу:
//додаємо до прототипу елементів метод backgroundColorGradient2
HTMLElement.prototype.backgroundColorGradient2=function(colors,to){
if(to==undefined)to='bottom';
this.style.background='linear-gradient(to '+to+','+colors+')';
}
//document.getElementById('test5').backgroundColorGradient2(['blue','yellow'],'bottom');
document.getElementById('test5').backgroundColorGradient2('#ecb002,black,#3d3d3d');
Змінюючий ефект градієнта фону елементу:
var el = document.getElementById('test6');
el.animate([{background:'linear-gradient(to bottom, red,yellow)'},{background:'linear-gradient(to bottom, green,yellow)'}],{duration:2500,iterations:Infinity});