November 26, 2014 08:02
diff --git a/Animated-Background-Gradient.markdown b/Animated-Background-Gradient.markdown
diff --git a/index.html b/index.html
 <html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="gradient" />
 </body>
 </html>

   
diff --git a/script.js b/script.js

 var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

 var step = 0;
 //color table indices for: 
 // current color left
 // next color left
 // current color right
 // next color right
 var colorIndices = [0,1,2,3];

 //transition speed
 var gradientSpeed = 0.002;

 function updateGradient()
 {
 var c0_0 = colors[colorIndices[0]];
 var c0_1 = colors[colorIndices[1]];
 var c1_0 = colors[colorIndices[2]];
 var c1_1 = colors[colorIndices[3]];

 var istep = 1 - step;
 var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
 var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
 var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
 var color1 = "rgb("+r1+","+g1+","+b1+")";

 var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
 var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
 var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
 var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('#gradient').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    
    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
  }
 }

 setInterval(updateGradient,10);
diff --git a/style.css b/style.css
 	body{
 	 background-color: #000000;
   padding: 0px;
   margin: 0px;
 }

 #gradient
 {
  width: 100%;
  height: 800px;
  padding: 0px;
  margin: 0px;
 }
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	</head>
	<body>
	<div id="gradient" />
	</body>
	</html>

	var colors = new Array(
	[62,35,255],
	[60,255,60],
	[255,35,98],
	[45,175,230],
	[255,0,255],
	[255,128,0]);

	var step = 0;
	//color table indices for:
	// current color left
	// next color left
	// current color right
	// next color right
	var colorIndices = [0,1,2,3];

	//transition speed
	var gradientSpeed = 0.002;

	function updateGradient()
	{
	var c0_0 = colors[colorIndices[0]];
	var c0_1 = colors[colorIndices[1]];
	var c1_0 = colors[colorIndices[2]];
	var c1_1 = colors[colorIndices[3]];

	var istep = 1 - step;
	var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
	var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
	var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
	var color1 = "rgb("+r1+","+g1+","+b1+")";

	var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
	var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
	var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
	var color2 = "rgb("+r2+","+g2+","+b2+")";

	$('#gradient').css({
	background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
	background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

	step += gradientSpeed;
	if ( step >= 1 )
	{
	step %= 1;
	colorIndices[0] = colorIndices[1];
	colorIndices[2] = colorIndices[3];

	//pick two new target color indices
	//do not pick the same as the current one
	colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
	colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

	}
	}

	setInterval(updateGradient,10);
	body{
	background-color: #000000;
	padding: 0px;
	margin: 0px;
	}

	#gradient
	{
	width: 100%;
	height: 800px;
	padding: 0px;
	margin: 0px;
	}