On the HTML5 Rocks webite they've added snow to the main banner area.
It's very interesting to see how they've done it, you can get some ideas for your next project.
Canvas to the rescue
Yep, this black magic snow uses HTML canvas to create the area where the snow is gonna fall. So first of all we need a container:
<div class="snowContainer" style="height: 500px;"></div>
Code language: HTML, XML (xml)
That's it, next thing...
Sweet JavaScript
No libraries, frameworks or any dirty code. Just plain and simple JavaScript. You'll probably want some information about Canvas first so here it is:
- Canvas and HTML, Mozilla Developer Network
- Posts about canvas on HTML5 Rocks
- Canvas - Dive into HTML5
- requestAnimationFrame tutorial by Paul Irish, you'll need it.
Now ready or not here comes the code:
(function () {
// Will it be a storm or peaceful?
var COUNT = 300;
// 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 = '#FFF';
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);
})();
Code language: JavaScript (javascript)