它们如何在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元素。雨滴是通过＆lt; canvas＆gt;完成的。元件。

Answer 4

他们使用jQuery Mootools和相关的动画来创建这种效果，你可以使用jquery .animate（）复制非常类似的东西。并将其设置在一个恒定循环的函数中。

Answer 5

这是现代浏览器（如IE9，FF和Chrome）支持的HTML5 canvas元素。它还包括浮动DIVS和云端的一些聪明的JS。

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