EffectHub.com: your best source for gaming

Recommendation

More Effects...

requestAnimFrame = (function() {
  return function(callback) {
    window.setTimeout(callback, 1000/60);
  };
})();

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = 0;
var height = 0;
var ltp = window.innerWidth / 2 - 170

window.onresize = function onresize() {
	width = canvas.width = window.innerWidth;
	height = canvas.height = window.innerHeight;
  ltp = window.innerWidth / 2 - 170;
}

window.onresize();

var mouse = {
	X : 0,
	Y : 0
}

window.onmousemove = function onmousemove(event) {
	mouse.X = event.clientX;
	mouse.Y = event.clientY;
}

var particles = [];
var drops = [];

function Rain(X, Y, i) {
	if (!i) {
		i = 2;
	}
	while (i--) {
		particles.push( 
		{
			deltaX : (Math.random() * 0.25),
			deltaY : (Math.random() * 9) + 1,
			X : X,
			Y : 110+Y,
			alpha : 1,
      col: "hsla(200,100%,80%,1)",
		})
	}
}

function explosion(X, Y, col, i) {
	if (!i) {
		i = 5;
	}
	while (i--) {
		drops.push( 
		{
			deltaX : (Math.random() * 4-2	),
			deltaY : (Math.random() * -4 ),
			X : X,
			Y : Y,
			radius : 0.7 + Math.floor(Math.random() * 1.4),
			alpha : 1,
			colour : col
		})
	}
}

function render(ctx) {

ctx.save();
  var grd=ctx.createLinearGradient(width/2,0,width/2,height);
  grd.addColorStop(0,"rgba(63,76,107,1)");
  grd.addColorStop(1,"rgba(79,115,135,1)");
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,width,height);
	
	var visibleParticles = particles;
	var visibleDrops = drops;
	var tau = Math.PI * 2;

for (var i = 0, activeParticles; activeParticles = visibleParticles[i]; i++) {
		ctx.globalAlpha = activeParticles.alpha;
		ctx.fillStyle = activeParticles.col;
		ctx.fillRect(activeParticles.X, activeParticles.Y, activeParticles.deltaY/4, activeParticles.deltaY);
	}

for (var i = 0, activeDrops; activeDrops = visibleDrops[i]; i++) {
		ctx.globalAlpha = activeDrops.alpha;
		ctx.fillStyle = activeDrops.col;
		ctx.beginPath();
		ctx.arc(activeDrops.X, activeDrops.Y, activeDrops.radius, 0, tau);
		ctx.fill();
	}
		ctx.strokeStyle = "black";
		ctx.lineWidth = 1;
	ctx.restore();
}

function update() {

var visibleParticles = particles;
	var visibleDrops = drops;
	
	for (var i = 0, activeParticles; activeParticles = visibleParticles[i]; i++) {
		activeParticles.X += activeParticles.deltaX;
		activeParticles.Y += activeParticles.deltaY+5;
		if (activeParticles.Y > height-15) {
			visibleParticles.splice(i--, 1);
			explosion(activeParticles.X, activeParticles.Y, activeParticles.col);
		}
	}

for (var i = 0, activeDrops; activeDrops = visibleDrops[i]; i++) {
		activeDrops.X += activeDrops.deltaX;
		activeDrops.Y += activeDrops.deltaY;
		activeDrops.radius -= 0.075;
		if (activeDrops.alpha > 0) {
			activeDrops.alpha -= 0.005;
		} else {
			activeDrops.alpha = 0;
		}
		if (activeDrops.radius < 0) {
			visibleDrops.splice(i--, 1);
		}
	}

var i = 2;
	while (i--) {
		Rain(ltp+Math.floor((Math.random()*340)), -15);
	}
}

(function start() {
	requestAnimFrame(start);
	update();
	render(ctx);
})();

CSS

#canvas {
  position: absolute;
  top: 0px;
  left: 0px;
}

.cloud {
  background: white;
  width: 340px;
  height: 110px;
  position: absolute;
  top: 130px;
  left: 50%;
  margin-left: -170px;
  z-index: 100;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-animation: float 2s 0s infinite alternate linear;
          animation: float 2s 0s infinite alternate linear;
  border-radius: 50%;
}
.cloud:before {
  content: "";
  width: 200px;
  height: 150px;
  border-radius: 100%;
  position: absolute;
  background: white;
  top: -20px;
  left: -10px;
}
.cloud:after {
  content: "";
  width: 170px;
  height: 170px;
  border-radius: 100%;
  position: absolute;
  background: white;
  right: -10px;
  top: -40px;
}

.cloudy {
  width: 200px;
  height: 150px;
  border-radius: 100%;
  position: absolute;
  background: white;
  right: -10px;
  top: 30px;
}
.cloudy:before {
  content: "";
  width: 150px;
  height: 120px;
  border-radius: 100%;
  position: absolute;
  background: white;
  top: 20px;
  left: -100px;
}

@-webkit-keyframes float {
  from {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  to {
    -webkit-transform: translate(-5%, -50%);
            transform: translate(-5%, -50%);
  }
}

@keyframes float {
  from {
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  to {
    -webkit-transform: translate(-5%, -50%);
            transform: translate(-5%, -50%);
  }
}

HTML

Recommendation

Join Effecthub.com