Snowing

by Admiral Potato

HTML

<div id="holder"></div>

CSS

html, body, #holder{
    height: 100%;
    width: 100%;
}
body{
    background-color: #000;
}
#holder{
    position: relative;
    overflow: hidden;
}
.red{
    background-color: red;
}
.flake{
    background-image:url(http://i.imgur.com/SAan0.png);
    background-repeat: no-repeat;
    height: 128px;
    width: 128px;
    margin: -64px 0 0 -64px;
    position: absolute;
}
.flake.s1{
    background-position: -128px 0;
}
.flake.s2{
    background-position: -256px 0;
}
.flake.s3{
    background-position: -384px 0;
}

JavaScript

var tau = Math.PI * 2;
var deg = tau / 360;

var holder = document.getElementById('holder');

var scene = {
    interval: false,
    frameRate: 40,
    q: [],
    update: function(){
        var t = this, i, item;
        for(i = 0; i < t.q.length; i += 1){
            item = t.q[i];
            item.update();
        }
    },
    start: function(){
        var t = this;
        if (t.interval === false){
            t.interval = setInterval(
                function(){
                    t.update();    
                },
                1000/t.frameRate                
            );             
        }                
                    
    },
    stop: function(){
        clearInterval(this.interval);
    }
};

var Snowflake = function(){
    var t = this, type = 'Snowflake';
    if(t.type !== type){
        throw type + ' constructor requires use of the `new` keyword';        
    }
    t.element = document.createElement('div');
    t.element.className = 'flake s' + (Math.round(Math.random() * 3));
    holder.appendChild(t.element);
    t.offset = Math.random() * 360;
    t.wiggleFactor = Math.random();    
    t.pos = {
        x: Math.random() * window.innerWidth,
        y: -t.offset + (Math.random() * 720)
    };
    t.phaze = 0;
};

Snowflake.prototype = {
    type: 'Snowflake', 
    update: function(){
        var t = this;
        t.phaze += 1;
        t.pos.y += 1 + (t.offset / 360);
        t.pos.x += Math.sin(deg * (t.phaze + t.offset)) * t.wiggleFactor;
        t.element.style.left = t.pos.x + 'px';
        t.element.style.top= t.pos.y + 'px';
        if(t.pos.y > window.innerHeight + 64){
            t.pos.y = -64;
            t.pos.x = Math.random() * window.innerWidth;
        }
    }
};

var i, myFlake;
for(i = 0; i < 50; i += 1){
    myFlake = new Snowflake();
    scene.q.push(myFlake);
}
scene.start();