jQuery Ripples 隔壁老李同款水波纹涟漪特效

文*** · 2025-6-12 15:38

jQuery Ripples 是一款利用 WebGL 技术实现的水波涟漪特效插件，支持鼠标互动。可提升页面视觉效果和用户体验，需使用同源或允许跨域的图片。调用方法：引入 jQuery 和 jquery.ripples.js 文件，在页面元素上添加 CSS 背景图片，使用特定方法调用插件。可配置参数包括分辨率、涟漪半径、干扰效果等。

常有人问 gebilaoli.com 首页的水波纹特效是如何实现的，老李通常会让他们去搜 jQuery Ripples。

但是很多人搜到了也不知道怎么用，甚至还有人不会搜...

于是还是水一篇文章分享一下吧。

jQuery Ripples 是一款非常好玩的 jQuery 特效插件，可以为网页元素添加水波涟漪效果。它利用 WebGL 技术，实现了流畅的水波动画，并且支持鼠标互动，用户可以通过鼠标的移动和点击与水波进行互动。这种效果不仅能提升页面的视觉吸引力，还能带来更好的用户体验。如果你有兴趣，可以在你的项目中尝试使用这个插件，给你的网页增添一些动态元素！

需要注意的是，该插件必须使用同源的图片，或者是图片允许跨域才能正常工作。

使用方法

引入 jQuery 和 jquery.ripples.js 文件

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.ripples.js"></script>

复制代码

调用插件

页面面初始化完成后使用下面的方法调用，注意要调用水波纹效果的元素上要有一张 CSS 背景图片

//在<body>元素上调用该插件
$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});

复制代码

暂停和播放水波涟漪效果

$('body').ripples('pause');
$('body').ripples('play');

复制代码

添加水滴效果

$('body').ripples("drop", x, y, radius, strength);

复制代码

比如水滴自动落下

setInterval(function() {
var $el = $('body');
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.04 + Math.random() * 0.04;
$el.ripples('drop', x, y, dropRadius, strength);
}, 400);

复制代码

配置参数

resolution：分辨率。默认值：256。
dropRadius：水波涟漪的半径。默认值：20。
perturbance：干扰效果。默认值：0.03。
interactive：是否可以用鼠标进行互动。默认值：false。

复制代码

资源下载

@蓝奏云 @Github

原文链接：野路子

BoonKiong.com2025™

jQuery Ripples 隔壁老李同款水波纹涟漪特效

随机推荐

随手拍~~：

热门推荐~~：

论坛表情分享...

Discuz! X3.5 解决小图标不显示的方法...

如何在 discuz 帖子里添加 APlayer 音乐播...

Discuz! 相关帖子功能修改随机显示不依赖标...

Discuz! X3.5 手机版 logo 的路径...

热度会员~~：

免责声明~~：

手机App~~：