$(document).ready(function() { if( $('#view') !== null ) { // start the snowstorm $('#view').snowStorm({ width: 640, height: 480, flakes: 200 }); } }); // Snowflake plugin jQuery.fn.snowStorm = function(settings) { 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; // setView var cssObj = { 'background-color' : settings.viewColor, 'width' : settings.width, 'height' : settings.height, 'margin' : '0px', 'padding' : '0px', 'overflow': 'hidden', 'position': 'relative' } view.css(cssObj); //Snowflake creator snowFlake = function( index, fx, fy, fw, fh, fopacity ) { var cssObj = { 'width' : fw, 'height' : fh, 'top': fy, 'left': fx, 'background-color' : '#ffffff', 'opacity': fopacity, 'position': 'absolute' } var flake = $("
"); // append the flake to the view flake.appendTo(view).css(cssObj); //start the flake animation animateFlake( flake ); }; //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 ); }); } //Add the flakes // extend the width 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); } // create the mouse move handler view.bind("mousemove", function(event) { xOffset = event.clientX - (settings.width/2) ; }); };