我在几张背景图片上使用jQuery ripple effect来获取水下文字的外观。
为了得到我想要的东西,我需要至少启用一些'干扰'。扰动是涟漪中复合/折射的量。最初看起来很棒,但它会持续复合,直到涟漪超出我想要的范围。
我称之为涟漪如下:
$(".wavy").ripples({
interactive:false,
perturbance:0.01
});
然后像这样自动添加它们:
setInterval(function() {
var $el = $(".wavy");
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.02 + Math.random() * 0.02;
$el.ripples('drop', x, y, dropRadius, strength);
}, 1000);
我需要在几秒钟后停止效果,所以我试图清除间隔或在一定时间后停止它。
顺便说一句,我首先尝试仅在标题在视口中时运行效果,但效果的'pause'和'destroy'方法都是不可接受的。暂停在效果中间停止,并且破坏使背景图像(标题)消失。为了清除间隔,我尝试了这个:
var wavyLength = setInterval(function() { myWavy () }, 400);
function myWavy() {
var $el = $(".wavy");
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.02 + Math.random() * 0.02;
$el.ripples('drop', x, y, dropRadius, strength);
}
clearInterval(wavyLength,10000);
但这使得涟漪效应根本不会发生。
尝试用JS改善。感谢任何建议!
答案 0 :(得分:1)
使用setTimeout
等待10000ms
,然后致电clearInterval
setTimeout(function(){
clearInterval(wavyLength)
}, 10000)