Flexible animated gradient

Flexible-animated-gradient.markdown

Flexible animated gradient

Gradient functionality can easily be manipulated to create drastically different effects.

A Pen by Marc Barbeau on CodePen.

License.

index.html

<div id="demo"></div>

script.js

//Try building a differnt size grid.
var inputHeight = 15;
var inputWidth = 30;


//Generate div grid
function loadPage(){
  build(inputHeight,inputWidth); 
}
//Generate containers to be populated with boxes 
function build(height,width) {  
  var code = "";  
  var y;
  for (y = 0; y < height; y++) {    
    timing = y * 1000;    
    code += "<div class ='y-container'>";
    code += buildWidth(width);
    code += "</div>";
    }
    document.getElementById("demo").innerHTML = code;
}
//Populate containers with boxes
function buildWidth(width) {
  var codeTemp = "";
  var x;
  codeTemp += "<div class= 'x-container'>";
  for (x = 0; x < width; x++) {   
    codeTemp += "<div class ='boxes'></div>";
  }
  codeTemp += "</div>";
  return codeTemp;
}

window.onload = loadPage(); //Run on page load

style.scss

@import "compass/css3";
//Changing values will drastically effect animation 

//Try picking a few new colors
$color1: red;
$color2: yellow;
$color3: blue;

//Try changing how fast to rotate through colors
$x-color-timing: 8s;
$y-color-timing: 10s;

//Try differnt delay timing
//Slow it down to see how it works
// Speed it up for more gradent effect
$x-anim-timing: .2s;
$y-anim-timing: -.5s;


body{
  overflow:hidden;
  margin: 0;
  height:100%;
}
#demo{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
#demo div{
    position:static;
}
.y-container {
  -webkit-flex: 1;
  flex: 1;
  animation: colorRotate $y-color-timing linear infinite;
}
.x-container {
  height: 100%;
  display: -webkit-flex;
  display: flex;
}
.boxes {
    -webkit-flex: 1;
    flex: 1;
    animation: colorRotate $x-color-timing linear infinite;
  opacity: .5;
}

//Rotate through color wheel
@keyframes colorRotate {
  0% {
   background-color: $color1;
  }
  33% {
    background-color: $color2;
  }
  66%{
    background-color: $color3;
  }
  100%{
    background-color: $color1;
  }
}

// Loop through the y-axis and add some delay.
@for $y from 1 through 25 {
       .y-container:nth-child(#{$y}) { 
       @include animation-delay($y-anim-timing * $y);
      }
}

// Loop through the x-axis and add some delay.
@for $x from 1 through 100 {
       .boxes:nth-child(#{$x}) { 
       @include animation-delay($x-anim-timing * $x); 
      }
}