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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值