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!

DemoDownload

 

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…

 

DemoDownload

Free Graphics, Icons, Tutorials
Free Graphics Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector GraphicsFree Music Controls Vector Icon Pack
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358