jquery.ripples, 使用 web Ripple效果 在你的背景中添加

分享于 

4分钟阅读

GitHub

  繁體 雙語
Add water ripples to your background using WebGL.
  • 源代码名称:jquery.ripples
  • 源代码网址:http://www.github.com/sirxemic/jquery.ripples
  • jquery.ripples源代码文档
  • jquery.ripples源代码下载
  • Git URL:
    git://www.github.com/sirxemic/jquery.ripples.git
    Git Clone代码到本地:
    git clone http://www.github.com/sirxemic/jquery.ripples
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/sirxemic/jquery.ripples
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    插件插件插件

    通过By的权力,向HTML元素添加一层水,这将在 cursor 交互中发生纹理 !

    重要:这个插件需要 OES_texture_float 扩展( 和 OES_texture_float_linear 以获得更好的效果),并且只能使用相同的原始图像( 有关使用cross请求图像的更多信息,请参见链接 )。

    在这里单击 演示演示,并查看如何使用它。

    用法

    在包含jQuery的页面之后包含脚本,或者在使用 web pack或者Browserify等捆绑工具时,只需将它的导入到你的包中。

    在元素上使用这里插件的最快方法是确保元素具有 background-image 集( 目前只支持 url ),然后初始化插件:

    $(selector).ripples();

    还可以通过使用选项(。查看选项 secton 选项的完整列表) 初始化行为和外观来调整行为和外观:

    $(selector).ripples({
     dropRadius:...,
     perturbance:...,
     ...});

    插件还有多种方法以编程方式添加删除。显示。隐藏或者删除其他内容的效果。 有关详细信息,请参见方法

    命令行选项

    名称类型默认说明
    宋体字符串要用作 background的图像的URL。 如果没有这个插件,插件将尝试使用计算的background-image CSS属性的值。 数据uri也被接受。
    dropRadius浮点数20单击或者移动画布上的鼠标时,删除的大小( 以像素为单位)。
    扰动浮点数0.03基本上是由波纹引起的折射量。 0表示没有折射。
    分辨率整型256要渲染到的纹理的宽度和高度。 此值越大,渲染越平滑,涟漪传播的速度就越慢。
    交互booltrue鼠标点击和鼠标移动是否触发效果。
    crossOrigin字符串""用于受影响图像的crossOrigin属性。 有关详细信息,请参阅 MDN

    方法

    通话 $(selector).ripples('drop', x, y, radius, strength) 手动在元素坐标( x,y )的relative 中添加一滴的步骤。 radius 控制下降的大小和 strength的振幅。

    销毁

    调用 $(selector).ripples('destroy') 从元素中移除效果。

    隐藏/显示

    调用 .ripples('hide').ripples('show') 以切换效果的可见性。 隐藏它也将有效地暂停仿真。

    暂停/播放

    调用 $(selector).ripples('pause').ripples('play') 来切换仿真的状态。

    设置

    通话 $(selector).ripples('set', name, value) 更新效果的属性。 可以更新的属性包括:

    • dropRadius
    • perturbance
    • interactive
    • imageUrl ( 设置图像URL将更新用于效果的background 图像,但 background-image CSS属性将被更改)
    • crossOrigin ( 在更改 imageUrl 之前,设置将不会有任何效果)

    updateSize

    当窗口的宽度或者高度改变时,效果会自动调整大小。 当元素的维度改变时,你需要调用 $(selector).ripples('updateSize') 来相应地更新效果的大小。


    WEB  添加  Effect  后台  Webgl  Ripple  
    相关文章