LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#gradient-background {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  z-index: 10;
  overflow: hidden;
}
#gradient-background .box {
  position: relative;
  top: 0;
  left: 0;
}
#gradient-background .box .b1, #gradient-background .box .b2, #gradient-background .box .b3, #gradient-background .box .b4, #gradient-background .box .b5, #gradient-background .box .b6, #gradient-background .box .b7, #gradient-background .box .b8, #gradient-background .box .b9 {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: white;
  opacity: 0.12;
}
#gradient-background .box .b1.b1, #gradient-background .box .b2.b1, #gradient-background .box .b3.b1, #gradient-background .box .b4.b1, #gradient-background .box .b5.b1, #gradient-background .box .b6.b1, #gradient-background .box .b7.b1, #gradient-background .box .b8.b1, #gradient-background .box .b9.b1 {
  z-index: 1;
  left: 0%;
  transform: rotate(10deg);
}
#gradient-background .box .b1.b2, #gradient-background .box .b2.b2, #gradient-background .box .b3.b2, #gradient-background .box .b4.b2, #gradient-background .box .b5.b2, #gradient-background .box .b6.b2, #gradient-background .box .b7.b2, #gradient-background .box .b8.b2, #gradient-background .box .b9.b2 {
  z-index: 2;
  left: -10%;
  transform: rotate(290deg);
}
#gradient-background .box .b1.b3, #gradient-background .box .b2.b3, #gradient-background .box .b3.b3, #gradient-background .box .b4.b3, #gradient-background .box .b5.b3, #gradient-background .box .b6.b3, #gradient-background .box .b7.b3, #gradient-background .box .b8.b3, #gradient-background .box .b9.b3 {
  z-index: 3;
  left: 20%;
  transform: rotate(0deg);
}
#gradient-background .box .b1.b4, #gradient-background .box .b2.b4, #gradient-background .box .b3.b4, #gradient-background .box .b4.b4, #gradient-background .box .b5.b4, #gradient-background .box .b6.b4, #gradient-background .box .b7.b4, #gradient-background .box .b8.b4, #gradient-background .box .b9.b4 {
  z-index: 4;
  left: 50%;
  transform: rotate(210deg);
}
#gradient-background .box .b1.b5, #gradient-background .box .b2.b5, #gradient-background .box .b3.b5, #gradient-background .box .b4.b5, #gradient-background .box .b5.b5, #gradient-background .box .b6.b5, #gradient-background .box .b7.b5, #gradient-background .box .b8.b5, #gradient-background .box .b9.b5 {
  z-index: 5;
  left: -15%;
  transform: rotate(140deg);
}
#gradient-background .box .b1.b6, #gradient-background .box .b2.b6, #gradient-background .box .b3.b6, #gradient-background .box .b4.b6, #gradient-background .box .b5.b6, #gradient-background .box .b6.b6, #gradient-background .box .b7.b6, #gradient-background .box .b8.b6, #gradient-background .box .b9.b6 {
  z-index: 6;
  left: -40%;
  transform: rotate(70deg);
}
#gradient-background .box .b1.b7, #gradient-background .box .b2.b7, #gradient-background .box .b3.b7, #gradient-background .box .b4.b7, #gradient-background .box .b5.b7, #gradient-background .box .b6.b7, #gradient-background .box .b7.b7, #gradient-background .box .b8.b7, #gradient-background .box .b9.b7 {
  z-index: 7;
  left: -90%;
  transform: rotate(30deg);
}
#gradient-background .box .b1.b8, #gradient-background .box .b2.b8, #gradient-background .box .b3.b8, #gradient-background .box .b4.b8, #gradient-background .box .b5.b8, #gradient-background .box .b6.b8, #gradient-background .box .b7.b8, #gradient-background .box .b8.b8, #gradient-background .box .b9.b8 {
  z-index: 8;
  left: 50%;
  transform: rotate(140deg);
}
#gradient-background .box .b1.b9, #gradient-background .box .b2.b9, #gradient-background .box .b3.b9, #gradient-background .box .b4.b9, #gradient-background .box .b5.b9, #gradient-background .box .b6.b9, #gradient-background .box .b7.b9, #gradient-background .box .b8.b9, #gradient-background .box .b9.b9 {
  z-index: 9;
  left: 30%;
  transform: rotate(30deg);
}
JS
$(document).ready(function() {
  var colors = new Array(
    [230, 105, 147], [58, 164, 178], [40, 26, 88], [232, 24, 122]);

  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 = "#" + ((r1 << 16) | (g1 << 8) | b1).toString(16);

    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 = "#" + ((r2 << 16) | (g2 << 8) | b2).toString(16);

    $('#gradient-background').css({
      background: "-webkit-radial-gradient(80% 10%, circle, " + color1 + ", transparent), -webkit-radial-gradient(80% 50%, circle, " + color2 + ", transparent)"
    });

    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);
});

Description

Fondo de composición abstracta Script clonado de http://uigradients.com
Term
Thu, 02/22/2018 - 23:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv