jQuery Ribbles - 基于WebGL的水面涟漪动效插件

使用jQuery Ribbles插件可以很容易的为背景图片引入水珠掉落水面时所产生的涟漪动画特效。

首先引入jQuery脚本和jQuery Ribbles插件脚本：

<script src="/libs/jquery/jquery.min.js"></script>  
<script src="/libs/jquery/jquery.ripples.js"></script>

然后调用ripples方法就可以了：

$('body').ripples({  
    resolution: 512,  
    dropRadius: 20,  
    perturbance: 0.04,  
});

其中第1个参数resolution（分辨率）为水纹效果的细致程度，越大越细致。

第2个参数dropRadius代表水珠掉落水面时的接触范围。

第3个参数perturbance为扰动系数，可以理解为对应于水珠坠落时的力度。

效果如下图所示：

Ribbles插件基于WebGL技术而实现，代码和在线演示地址：

http://wow.techbrood.com/fiddle/2717