LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
  
  
    

Animated radial
gradient background

CSS
@import url(https://fonts.googleapis.com/css?family=Croissant+One);

body{
	background-color: #000000;
  padding: 0px;
  margin: 0px;
  color: black;
 }

#gradient
{
  width: 100%;
  min-height: 100vh;
  padding: 0px;
  margin: 0px;
  box-shadow: inset 0 0 200px hsla(0,0%,0%,.4);

}







h1 {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  font-family: 'Croissant One', sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 2.5em;
  line-height: 1.25em;
  color: #2d2d2d;
}
h1 span {
  display: inline-block;
  border-top: 1px solid #2d2d2d;
  border-bottom: 1px solid #2d2d2d;
  padding: .5em .6em;
}
JS
var colors = new Array(
  [251,243,246],
  [200,220,208],
  [111,123,140],
  [244,226,156],
  [141,158,170]);

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 = .015;

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').css({
   
   
   background: "-webkit-radial-gradient(center, circle cover, "+color1+","+color2+")"});
  
  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

A magical picture with vignetting and top notch "focus on content" background. To slow the speed please see at line 19 of JS.
Term
Wed, 11/29/2017 - 13:47

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv