jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件。该插件通过强大的WebGL，可以在指定的元素上添加一个水波层，制作出水波涟漪的炫酷效果，并且可以使用鼠标来和它进行互动。
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
这个水波涟漪特效使用了WebGL的扩展OES_texture_float和OES_texture_float_linear。该插件必须使用同源的图片才能正常工作。
使用方法
使用这个水波涟漪特效插件必须先引入jQuery和jquery.ripples.js文件。
<script src="js/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="js/jquery.ripples.js"></script> |
调用插件
在你要调用水波涟漪效果的元素上应该有一张CSS背景图片，否则效果会不太明显。该插件的使用方法非常简单，在页面初始化完成后使用下面的方法调用它。下面是在<body>元素上调用该插件。
$('body').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04,}); |
你还可以使用编程的方式来添加水滴效果：
$('body').ripples("drop", x, y, radius, strength) |
你还可以暂停和播放水波涟漪效果：
$('body').ripples('pause'); |
$('body').ripples('play'); |
配置参数
以下是该水波涟漪特效的一些可用参数。
- resolution：分辨率。默认值：256。
- dropRadius：水波涟漪的半径。默认值：20。
- perturbance：干扰效果。默认值：0.03。
- interactive：是否可以用鼠标进行互动。默认值：
false。
