Rain and Lightning effect | HTML

md.shakil hossain

1356

html rain code,rain and lightning effect,lightning effect using html,css rain animation,pure css rain,css raining effect,rain with lighting,online tutorials,rain,lighting,pure css,css only rain animation,no javascript,no jquery,html5,css rain effect,cool css effects,css3 animation effects,animation css3 effects,css3 effect tutorial,css lighting effects,web design,website

 <canvas id="c"></canvas>

Try it Yourself >>

 body { margin: 0; }
canvas { background: #CFF09E; display: block; }

Try it Yourself >>

(function(){
	
	var c = document.getElementById("c"),
			ctx = c.getContext("2d");
	
	c.width = innerWidth;
	c.height = innerHeight;
	
	var lines = [],
			maxSpeed = 5,
			spacing = 5,
			xSpacing = 0,
			n = innerWidth / spacing,
			colors = ["#3B8686", "#79BD9A", "#A8DBA8", "#0B486B"],
			i;
	
	for (i = 0; i < n; i++){
		xSpacing += spacing;
		lines.push({
			x: xSpacing,
			y: Math.round(Math.random()*c.height),
			width: 2,
			height: Math.round(Math.random()*(innerHeight/10)),
			speed: Math.random()*maxSpeed + 1,
			color: colors[Math.floor(Math.random() * colors.length)]
		});
	}
	
	
	function draw(){
		var i;
		ctx.clearRect(0,0,c.width,c.height);
		
		for (i = 0; i < n; i++){
			ctx.fillStyle = lines[i].color;
			ctx.fillRect(lines[i].x, lines[i].y, lines[i].width, lines[i].height);
			lines[i].y += lines[i].speed;
			
			if (lines[i].y > c.height)
				lines[i].y = 0 - lines[i].height;
		}
		
		requestAnimationFrame(draw);
		
	}
	
	draw();
	
}());

Try it Yourself >>