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>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.ripples.js"></script>
<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>元素上调用该插件
$('body').ripples({ 
  resolution: 512,
  dropRadius: 20,
  perturbance: 0.04,
});
//在<body>元素上调用该插件
$('body').ripples({ 
  resolution: 512,
  dropRadius: 20,
  perturbance: 0.04,
});

暂停和播放水波涟漪效果


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

添加水滴效果


$('body').ripples("drop", x, y, radius, strength);
$('body').ripples("drop", x, y, radius, strength);
$('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);
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);
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。
resolution：分辨率。默认值：256。
dropRadius：水波涟漪的半径。默认值：20。
perturbance：干扰效果。默认值：0.03。
interactive：是否可以用鼠标进行互动。默认值：false。
resolution：分辨率。默认值：256。
dropRadius：水波涟漪的半径。默认值：20。
perturbance：干扰效果。默认值：0.03。
interactive：是否可以用鼠标进行互动。默认值：false。

资源下载

此处内容已隐藏，请评论后刷新页面查看.

版权声明 1、本网站名称：亿点资源网
2、本站永久网址：https://www.yjjmt.com
3、本站文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系客服QQ1297545494进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向客服举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

子比教程技术教程资源分享
# 特效