Let it snow...

Let it snow...

Web Stuff 08.12.2015 1811


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.