阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.ripples 中文 API 文档

      插件 jQuery.ripples 中文 API 文档

      使用 WebGL 为您的背景添加水波纹效果

      源码 & 下载

      通过 WebGL 的强大功能,为 HTML 元素添加一层水,这将通过光标交互产生波动!

      重要提示:此插件需要 WebGL 扩展 OES_texture_float(并且 OES_texture_float_linear 效果更佳),并且仅适用于同源图像。

      用法

      在包含 jQuery 之后,在页面末尾包含脚本,或者当您使用捆绑工具(如 Webpack 或 Browserify)时,只需将其导入到捆绑包中即可。

      在元素上使用此插件的最快方法是确保元素具有 background-image 集合(当前仅支持 URL),然后按如下方式初始化插件:

      $(selector).ripples();
      

      (可选)您可以通过使用选项初始化来调整行为和外观(有关选项的完整列表,请参阅选项 secton):

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

      该插件还有几种方法可以编程方式添加丢弃,显示,隐藏或删除效果等。有关详细信息,请参阅方法部分。

      选项

      名称类型默认描述
      IMAGEURL空值要用作背景的图像的 URL。如果没有,插件将尝试使用计算的 background-imageCSS 属性的值。也接受数据 URI。
      dropRadius浮动20通过在画布上单击或移动鼠标而产生的拖放的大小(以像素为单位)。
      扰动浮动0.03基本上由波纹引起的折射量。0 表示没有折射。
      解析度整数256要呈现的 WebGL 纹理的宽度和高度。此值越大,渲染越平滑,涟漪传播越慢。
      互动布尔真正鼠标点击和鼠标移动是否会触发效果。
      crossOrigin“”用于受影响图像的 crossOrigin 属性。有关更多信息,请参阅 MDN。

      方法

      下降

      调用 $(selector).ripples(‘drop’, x, y, radius, strength) 在元素的相对坐标(x,y)处手动添加一个 drop。radius 控制下降的大小和 strength 产生的纹波的幅度。

      破坏

      调用 $(selector).ripples(‘destroy’) 从元素中删除效果。

      隐藏 / 显示

      调用。ripples(‘hide’) 并。ripples(‘show’) 切换效果的可见性。隐藏它也将有效地暂停模拟。

      暂停 / 开始

      调用 $(selector).ripples(‘pause’) 并。ripples(‘play’) 切换模拟的状态。

      set

      调用 $(selector).ripples(‘set’, name, value) 以更新效果的属性。可以更新的属性是:

      • dropRadius
      • perturbance
      • interactive
      • imageUrl(设置图像 URL 将更新用于效果的背景图像,但 background-imageCSS 属性将不受影响)
      • crossOrigin(设置此项将不会有任何影响,直到 imageUrl 更改)

      updateSize

      当窗口的宽度或高度发生变化时,效果会自动调整大小。当元素的尺寸发生变化时,您需要调用 $(selector).ripples(‘updateSize’) 以相应地更新效果的大小。

      目录
      目录