Making snow: jQuery Snowstorm plugin

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

screenshot of the snowstorm

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'

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 );
          "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)  )
            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.

Image Carousel: Jquery vs. Flash

I used to build my carousels in flash, but i seemed a good challenge for me to build a nice looking carousel in jQuery. Of course the carousel should have the same functionality as a flash carousel. Thus said the carousel should get all the content from the html itself, include paging, the possibility for some text over the image and have nice transitions.

I searched the web for available plugins and the jQuery Cycle plugin seemed the best start. The only task left for me was finding a way to display text over the images and style the carousel. The result is astonishing and since the content is html it has a lot of advances over flash, SEO, accesibillity and much easier to implement for backend developers. However flash still has to advantage ( or disadvantage ) that it compiles your code which makes it less easy to copy it.

The result and code ( of the jQuery carousel ) can be found here

CSS3 Break word

During webdevelopment I have encountered many client with their own jargon, most often with very long words. It was not always possible to prevent long words breaking out of box. A few weeks ago i was testing the possibilities of CSS3 and which tags could be used in most modern browsers, thus excluding IE6. There were few but the cs3 property: word-wrap: break-word; did work. Of course it doesn’t provide you with perfect hyphenation which would be very difficult for all existing languages, but it will keep your layout clean. on the demonstration page.

works inĀ  IE7+, FF 3.5, Chrome 2+