How do they animate falling raindrops on the http://dropr.com site?

I'd like to k开发者_如何学运维now how this website http://dropr.com/ managed to get the cool floating clouds and colourful rainsdrops falling.

looks class

It uses JavaScript to continually change the top CSS value of the clouds. The drops are drawn on a stationary <canvas> which is behind the clouds.

you can check it with any development tool like firebug o chrome tool but it was made with javascript, hare you have the animation code:

var t = 2000;

var animation1 = $('homeCloud1').getElement('div').animate()
.tween('top', -10, {
    duration: t
})
.delay(100)
.tween('top', 20, {
    duration: t
})
.repeat();
animation1.start();

The clouds are div elements that are moving. The raindrops are done via a <canvas> element.

They used jQuery Mootools and associated animations to create that effect, you could replicate something very similar using jquery .animate(); and set it within a function for a constant loop.

This is the HTML5 canvas element supported by modern browsers such as IE9, FF and Chrome. It also includes floating DIVS and some clever JS for the clouds.

http://www.w3schools.com/html5/html5_canvas.asp