HTML5 JavaScript Christmas Snow Background

So with Christmas just round the corner (42 days at time of writing), we thought we should start getting into the spirit of things and put together a nice little festive script that you can include on your website. Here we have a HTML5 and JS script to make your website’s background appear as though it’s snowing. Enjoy!

Demo Download

Basic HTML

<!DOCTYPE html>
<html>
	<head>

		<meta charset="UTF-8">

		<title>Christmas Snow Background - The Web Taylor</title>

		<script src="snow-background.js"></script>
		<script>
			window.onload = function() {
			  try {
				snow.count = 30;   // number of flakes
				snow.delay = 20;   // timer interval
				snow.minSpeed = 2; // minimum movement/time slice
				snow.maxSpeed = 5; // maximum movement/time slice
				snow.start();
			  } catch(e) {
				// no snow :(
			  }
			};
		</script>
		
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/style.css">

	</head>

	<body>

	<div id="content">
		<div class="container">
			<h1>HTML5 JavaScript Christmas Snow Background</h1>
			<p>JavaScript Christmas Snow Background by The Web Taylor</p>
			<img src="http://images.thewebtaylor.co.uk/logos/logo-2015.png" />
		</div>
	</div>

	</body>
</html>

The JavaScript (snow-background.js)

snow = {
	count: 60,
	delay: 10,
	flutter: 0.2,
	wind: 1.0,
	w1: 1,
	minSpeed: 0.3,
	maxSpeed: 4,
	cv: null,
	flakes: [],
	toggle: function() {
		if(window.snowtimer)
			snow.stop();
		else
			snow.start();
	},
	resize: function() {
		snow.cv.width = innerWidth;
		snow.cv.height = outerHeight;
		snow.gt = snow.ct.createLinearGradient(0,0,0,snow.cv.height);
		snow.gt.addColorStop(0.0, '#055B79');
		snow.gt.addColorStop(1.0, '#0099CC');
		snow.ct.fillStyle = snow.gt;
	},
	start: function() {
		snow.cv = document.createElement('canvas');
		snow.cv.width = snow.cv.height = 10; // set initial size
		snow.cv.id = 'backgroundSnowCanvas';
		document.body.appendChild(snow.cv);
		snow.createFlake();
		snow.ct = snow.cv.getContext('2d'),
		snow.cv.style.position = 'absolute';
		snow.cv.style.top = 0;
		snow.cv.style.left = 0;
		snow.cv.style.zIndex = -1;
		snow.resize();
		var c = snow.count;
		snow.flakes = [];
		do {
			snow.flakes.push(new snow.flake());
		} while(--c);
		snow.ct.fillRect(0,0,snow.cv.width,snow.cv.height);
		window.snowtimer = window.setInterval(snow.draw, snow.delay);
		window.addEventListener('resize',snow.resize);
	},
	stop: function() {
		window.clearInterval(window.snowtimer);
		var c = document.getElementById('backgroundSnowCanvas');
		c.parentNode.removeChild(c);
		window.snowtimer=snow=null;
	},
	draw: function() {
		var ct = snow.ct, f = snow.flakes, c = snow.count;
		ct.fillRect(0,0,snow.cv.width,snow.cv.height);

		do {
			if(f[--c].draw(ct) && ++fdone) { };
		} while(c);
		snow.wind += Math.cos(snow.w1++ / 180.0);
	},
	flake: function() {
		this.draw = function(ct) {
			ct.drawImage(snow.flakeImage,this.x + snow.wind,this.y,this.sz,this.sz);
			this.animate();
		};
		this.animate = function() {
			this.y += this.speed;
			this.x += this.flutter * Math.cos(snow.flutter * snow.flutter * this.y);
			if(this.y > innerHeight)
				this.init(1);
		};
		this.init = function(f) {
			this.speed = snow.minSpeed + (Math.random() * (snow.maxSpeed - snow.minSpeed));
			this.sz = ~~(Math.random() * 40) + 20;
			this.flutter = ~~(Math.random() * snow.flutter * (60-this.sz));
			this.x = (Math.random() * (innerWidth + this.sz)) - this.sz;
			this.y = f ? -this.sz : Math.random() * innerHeight;
		};
		this.init();
	},
	createFlake: function() {
		snow.flakeImage = document.createElement('canvas');
		snow.flakeImage.width = snow.flakeImage.height = 40;
		var c = snow.flakeImage.getContext('2d');
		c.fillStyle = '#fff';
		c.translate(20,20);
		c.beginPath();
		c.rect(-5,-20,10,40);
		c.rotate(Math.PI / 3.0);
		c.rect(-5,-20,10,40);
		c.rotate(Math.PI / 3.0);
		c.rect(-5,-20,10,40);
		c.closePath();
		c.fill();
	},
};

Some Basic CSS

body {
	background: #09c;
}

canvas {
	height: 100%;
	width: 100%;
}

#content {
	padding: 100px;
}

.container {
	background: rgba(255, 255, 255, 0.8);
	color: #2b2b2b;
	padding: 40px;
	text-align: center;
}

Conclusion

This code will get you on your way to making your website snow at Chrismas! If you have any comments, suggestions or need any help then please let us know in the comments…

Demo Download