Форум

weblab · #1 (**permalink**) 11.05.2015, 05:58

Подскажите, как правильно сделать плавную смену фона (именно цвета). Для примера нашел это
Делал так:

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
 <script language="javascript">
 
var begcolor='#ff1a0c';
var endcolor='#ab00ff';
var steps=250;
var delay=50;
 
var data=new Array();
var ns4=(document.layers)?true:false;
for(i=1, j=1;i<=3; i++, j+=2)data[i]=new colorset(j);
document.bgColor=begcolor;
 
function colorset(num){
this.beg=parseInt('0x'+begcolor.substring(num,num+2));
this.end=parseInt('0x'+endcolor.substring(num,num+2));
this.up=this.startup=(this.end>=this.beg)? true : false;
this.incr=Math.abs(this.end-this.beg)/steps;
this.current=this.beg;
}
 
function changebg(){
var color=new Array();
for(i=1;i<=3; i++){
(data[i].up)? data[i].current+=data[i].incr : data[i].current-=data[i].incr;
if(data[i].startup){
if(data[i].current>=data[i].end){ data[i].up=false; data[i].current=data[i].end}
if(data[i].current<=data[i].beg){ data[i].up=true; data[i].current=data[i].beg }
}
if(!data[i].startup){
if(data[i].current<=data[i].end){ data[i].up=true; data[i].current=data[i].end}
if(data[i].current>=data[i].beg){ data[i].up=false; data[i].current=data[i].beg}
}
color[i]=data[i].current;
}
color[4]=Math.floor(color[1]).toString(16); if(color[4].length==1)color[4]='0'+color[4];
color[5]=Math.floor(color[2]).toString(16); if(color[5].length==1)color[5]='0'+color[5];
color[6]=Math.floor(color[3]).toString(16); if(color[6].length==1)color[6]='0'+color[6];
document.bgColor='#'+color[4]+color[5]+color[6];
 
}
window.onload=function(){
setInterval('changebg()',delay);
}
</script>
  </body>
</html>

но не подходит, так как можно использовать только 2 цвета переходящие друг в друга. А нужно чтобы были все цвета радуги

Safort · #2 (**permalink**) 11.05.2015, 15:19

weblab,
зачем же так мучиться? В CSS задай специальным классам эти цвета, добавь CSS-свойство transition для плавности и через нужное время меняй классы.

рони · #3 (**permalink**) 11.05.2015, 17:18

weblab,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:100px;
    height:100px;
    -webkit-animation: color 5s ease-in-out infinite;
	-moz-animation: color 5s ease-in-out infinite;
	-o-animation: color 5s ease-in-out infinite;
	animation: color 5s ease-in-out infinite;
  }

  @keyframes color {
      0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }

}
@-webkit-keyframes color {
  0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }
}


  </style>
</head>

<body>
<div></div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript