EffectHub.com: your best source for gaming

Recommendation

More Effects...

var div = document.createElement('div');
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var w;
  var h;
  var msTimer = 0.0;
  var rainArr = [50];
  var rainSpeed = 4;
  var x = 0;
  var y = 0;

function init() {
    document.body.appendChild(canvas);
    updatePosition();
    createRain();

setInterval(mainLoop, 30);
  }
  init();

function createRain() {
    var length = 500;
    rainArr = [];
    for (var i = length - 1; i >= 0; i--) {
      rainArr.push({
        x: 1,
        y: 0,
        z: 0
      });
    }

for (var j = 0; j < 500; j++) {
      rainArr[j].x = Math.floor((Math.random() * 820) - 9);
      rainArr[j].y = Math.floor((Math.random() * 520) - 9);
      rainArr[j].z = Math.floor((Math.random() * 2) + 1);
      rainArr[j].w = Math.floor((Math.random() * 3) + 2);
    }
  }

function updatePosition() {
    var bodyWidth = document.documentElement.clientWidth,
      bodyHeight = document.documentElement.clientHeight;
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
    div.style.left = div.style.right =
      div.style.top = div.style.bottom = '0';
  }

function mainLoop() {
    updatePosition();
    msTimer += 30;

ctx.fillStyle = '#202426';
    ctx.fillRect(0, 0, w, h);

glow();
    rain();

}

function glow() {
    var sinGlowMod = 5 * Math.sin(msTimer / 200);
    var cosGlowMod = 5 * Math.cos((msTimer + 0.5 * sinGlowMod) / 200);
    var grdGlow = ctx.createRadialGradient(50 + x, 50 - y, 0, 160 + y + sinGlowMod,
      160 - x, 400 + cosGlowMod);
    grdGlow.addColorStop(0.000, 'rgba(220, 240, 160, 1)');
    grdGlow.addColorStop(0.2, 'rgba(180, 240, 160, 0.4)');
    grdGlow.addColorStop(0.4, 'rgba(140, 240, 160, 0.2)');
    grdGlow.addColorStop(1, 'rgba(140, 240, 160, 0)');
    ctx.fillStyle = grdGlow;
    ctx.fillRect(0, 0, w, h);
  }

var grd = ctx.createRadialGradient(250, 450, 140, 250, 300, 600);
      grd.addColorStop(0.000, 'rgba(100, 170, 160, 0.2)');
      grd.addColorStop(0.1, 'rgba(100, 160, 160, 0.12)');
      grd.addColorStop(0.2, 'rgba(100, 150, 150, 0.1)');
      grd.addColorStop(1, 'rgba(100, 140, 140, .08)');
      ctx.fillStyle = grd;
      ctx.fillRect(rainArr[i].x * 2, rainArr[i].y * 2, rainArr[i].z * 2, 9);
    }
  }

document.querySelector('body').addEventListener('mousemove', function(e) {
    x = (e.pageX * -1 / 2) / 5;
    y = (e.pageY * -1 / 2) / 5;
  });

CSS

HTML

Recommendation

Join Effecthub.com