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