基于WebGL的炫酷元素背景水波涟漪jQuery特效

当前位置:主页 > jQuery库 > 图片效果 > 基于WebGL的炫酷元素背景水波涟漪jQuery特效
基于WebGL的炫酷元素背景水波涟漪jQuery特效
分享:

    插件介绍

    jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件。该jQuery插件通过强大的WebGL,可以在指定的元素上添加一个水波层,制作出水波涟漪的炫酷效果,并且可以使用鼠标来和它进行互动。

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-12
    阅读:
简要教程

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_floatOES_texture_float_linear。该插件必须使用同源的图片才能正常工作。

jQuery水波涟漪效果

使用方法

使用这个水波涟漪特效插件必须先引入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