他们如何在http://dropr.com站点上动画下落的雨滴？

Question

我想知道这个网站http://dropr.com/是如何让凉爽的浮云和五颜六色的雨滴落下来的。

看起来很有档次

Answer 1

它使用JavaScript不断改变云的top CSS值。这些水滴是在云后面的静止<canvas>上绘制的。

Answer 2

你可以用任何开发工具检查它，比如firebug o chrome工具，但它是用javascript制作的，你有没有动画代码：

var t = 2000;

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

Answer 3

云是正在移动的div元素。雨滴是通过一个元素完成的。