Let it snow...

Let it snow...

Web Stuff 08.12.2015 3519

Christmas is close and most of you would probably like to have a snowing effect on your website. Thanks to Javascript, CSS3 and HTML5 Canvas it is done with ease.

You can add a snowing effect to any container you like with following Javascript code:

(function () {
 
 // Will it be a storm or peaceful?
 var COUNT = 100;
 
 // Get our cotaniner
 var snowContainer = document.querySelector('.snowContainer');
 
 // Create the canvas element
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
 
 // Get the size of the container, that's why we defined the height in the HTML
 var width = snowContainer.clientWidth;
 var height = snowContainer.clientHeight;
 var i = 0;
 var active = false;
 
 function onResize() {
 width = snowContainer.clientWidth;
 height = snowContainer.clientHeight;
 canvas.width = width;
 canvas.height = height;
 ctx.fillStyle = '#ffffff';
 
 requestAnimFrame(update);
 }
 
 var Snowflake = function () {
 this.x = 0;
 this.y = 0;
 this.vy = 0;
 this.vx = 0;
 this.r = 0;
 
 this.reset();
 }
 
 // You can set up the 
 Snowflake.prototype.reset = function() {
 this.x = Math.random() * width;
 this.y = Math.random() * -height;
 
 // More speed? Change this
 this.vy = 1 + Math.random() * 3;
 this.vx = 0.5 - Math.random();
 
 // Bigger snow?
 this.r = 1 + Math.random() * 2;
 
 this.o = 0.5 + Math.random() * 0.5;
 }
 
 canvas.style.position = 'absolute';
 canvas.style.left = canvas.style.top = '0';
 
 var snowflakes = [], snowflake;
 for (i = 0; i < COUNT; i++) {
 snowflake = new Snowflake();
 snowflake.reset();
 snowflakes.push(snowflake);
 }
 
 function update() {
 
 ctx.clearRect(0, 0, width, height);
 
 for (i = 0; i < COUNT; i++) {
 snowflake = snowflakes[i];
 snowflake.y += snowflake.vy;
 snowflake.x += snowflake.vx;
 
 ctx.globalAlpha = snowflake.o;
 ctx.beginPath();
 ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
 ctx.closePath();
 ctx.fill();
 
 if (snowflake.y > height) {
 snowflake.reset();
 }
 }
 
 requestAnimFrame(update);
 }
 
 // shim layer with setTimeout fallback
 window.requestAnimFrame = (function(){
 return window.requestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 function( callback ){
 window.setTimeout(callback, 1000 / 60);
 };
 })();
 
 onResize();
 window.addEventListener('resize', onResize, false);
 
 snowContainer.appendChild(canvas);
})();

and a little bit of CSS3:

canvas{
z-index:1000;
}

Let's split the Javascript code into the most important parts:

// Will it be a storm or peaceful?
 var COUNT = 100;

Change this if you like more (higher number) or less (lower number) snow.

// Get our cotaniner
 var snowContainer = document.querySelector('.snowContainer');

The class snowContainer defines where the snow should fall.

The result can be seen on the image below. Let it snow, let it snow, let it snow.