check snowstorm demo
Inspired by the current weather in the Netherlands I wanted to make snow with jQuery. A year Ago I would have used flash for this task, and I still believe flash is better for this specific job ( anyone fancies square snow flakes ). However I think the animation still stands strong. Of course the parallax effect and the opacity make the snowstorm realistic as well as the mousemove handler which makes it possible to change the wind direction.
the plugin itself is relatively small and can be found in scripts.js file, I did not make a separate plugin file because this snowstorm plugin is only a start, and most users would customize it extensively
The plugin follows the following steps.
1. interpret the options, and use them in local variables and objects
settings = jQuery.extend({
width: 640,
height: 480,
viewColor: '#000000',
flakes: 100
}, settings);
//plugin vars
var view = this;
var xOffset = 0;
var extendedWidth = settings.width*2;
2. create and style the view container
// setView
var cssObj = {
'background-color' : settings.viewColor,
'width' : settings.width,
'height' : settings.height,
'margin' : '0px',
'padding' : '0px',
'overflow': 'hidden',
'position': 'relative'
}
view.css(cssObj);
3. add a mousemove handler to the view container
// create the mouse move handler
view.bind("mousemove", function(event)
{
xOffset = event.clientX - (settings.width/2) ;
});
4. create the flakes in a for loop
//Add the flakes
for( var i = 0; i < settings.flakes; i++ )
{
// extend the possible x beyond the view
var tx = Math.ceil( Math.random()* extendedWidth);
var ty = ( Math.ceil( Math.random()*50 ) ) -150;
var tsize = Math.ceil( Math.random()*10 + 4 );
var topacity = tsize * 0.1;
snowFlake( i, tx, ty, tsize, tsize, topacity);
}
5. Each flake starts it own animation function which call itself again
//Animate each flake
function animateFlake( flake )
{
// animate
var flakeDelay = Math.ceil( Math.random()*7000 );
var distanceY = settings.height + 20;
var ySpeed = Math.ceil( (1/flake.width() )*20000 );
flake.delay(flakeDelay).animate({
"top": distanceY,
"left": ("+="+xOffset)
}, ySpeed, function()
{
//reset flake position
var cssResetObj = {
'top': ( -flake.width() + 'px'),
'left': Math.ceil( ( Math.random()* extendedWidth)- (settings.width*0.5) )
}
flake.css(cssResetObj);
animateFlake( flake );
});
}
My next steps
After this experiment i want to to realize the same snowstorm with canvas. I am interested in the difference in performance. Of course Canvas should be way way faster because it lacks all the DOM hassle. And it would be possible to create much nicer snowflakes then white squares.