EffectHub.com: your best source for gaming

Recommendation

More Effects...

function hslToHex(h, s, l){
  var r, g, b;

if(s == 0){
    r = g = b = l;
  }else{
    function hue2rgb(p, q, t){
      if(t < 0) t += 1;
      if(t > 1) t -= 1;
      if(t < 1/6) return p + (q - p) * 6 * t;
      if(t < 1/2) return q;
      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    }

var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }

r = (r * 255).toFixed(0);
  g = (g * 255).toFixed(0);
  b = (b * 255).toFixed(0);
  
  var hR = Number(r).toString(16),
      hG = Number(g).toString(16),
      hB = Number(b).toString(16);
  hR = hR.length == 1 ? hR + '0' : hR.length > 2 ? hR[0] + hR[1] : hR;
  hG = hG.length == 1 ? hG + '0' : hG.length > 2 ? hG[0] + hG[1] : hG;
  hB = hB.length == 1 ? hB + '0' : hB.length > 2 ? hB[0] + hB[1] : hB;
  return '#'+hR+hG+hB;
}

/*for(var i = 1; i <= 48; i++){
  var hue = Math.random();
  for(var j = 1; j <= 5; j++){
    var color = hslToHex(hue, 0.5, j/8 + 0.15),
        div = document.createElement('DIV');
    div.style.background = color;
    document.body.appendChild(div);
  }
}*/

(function add_drop(){
  var hue = Math.random(),
      left = Math.random()*100,
      num_drops = 10,
      drops = $('<div/>').addClass('drops');
  drops.css({left: left+'vw'});
  for(var j = 1; j <= num_drops; j++){
    var color = hslToHex(hue, 0.5, (num_drops+1)/j),
        drop = $('<div/>');
    drop
    .addClass('drop')
    .css({
      background: color,
      width: ((((num_drops+1)-j)/num_drops)*100)+'%',
      bottom: ((j/num_drops)*100)+'%'
    });
    if(j == 1){
      drop.css('box-shadow', color + ' 0 0 30px 5px');
    }
    drops.prepend(drop);
  }
  
  $('body').append(drops);
  drops.css({top: -100});
  $(drops).on('transitionEnd webkitTransitionEnd oTransitionEnd', function(){
    $(this).addClass('ground');
    $(this).on('animationEnd webkitAnimationEnd oAnimationEnd', function(){
      $(this).remove();
    })
  });
  setTimeout(function(){
    drops.css({top: window.innerHeight - drops.height()});
  },0);
  requestAnimationFrame(add_drop);
})();

CSS

HTML

Recommendation

Join Effecthub.com