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

iefreer 发表于 2016-05-18 18:58:17

标签: webgl, canvas, html5, 水波

- +

使用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


possitive(1) negative(0) views9179 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章