Ефекти кольору фону

ПублікаціїАнімації і ефекти

Колір фону елементу у 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:['while','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:
//додаємо до прототипу елементів метод 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:
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});
Адмін 2017-10-15 16:55:38

Тільки зареєстровані користувачі можуть писати коментарі.