网站背景上的水波纹效果

Question

一位客户要求我将类似的水波纹效果应用到他们网站上的背景图片（仅限背景图片）。

考虑到这是使用画布，似乎不可能。 有没有人知道这样的效果，我可以只应用于页面上的背景图像？

Answer 1

对于高性能的、由 WebGL 驱动的解决方案，请查看此项目：

jQuery WebGL 涟漪

此处提供演示。

不过，这项技术并非适用于每个设备中的每个人。

Answer 2

看看这 2 个演示，我认为您可以根据这些演示来创建您的演示。

29a.ch和mrdoob

希望这可以帮助

Answer 3

不确定你是否还在寻找，但这有一个关于效果的很好的演示/教程： http : //code.almeros.com/water-ripple-canvas-and-javascript#.Ukpfe2QY2ok

演示在这里： http : //code.almeros.com/code-examples/water-effect-canvas/#.UkpiQmQY2ol

Answer 4

尝试使用我发布的脚本，只需将其复制并粘贴到您的代码中即可。 我已经用代码中的注释进行了解释

 (function(){ var canvas = document.getElementById('c'), /** @type {CanvasRenderingContext2D} */ ctx = canvas.getContext('2d'), width = 500, height = 200, half_width = width >> 1, half_height = height >> 1, size = width * (height + 2) * 2, delay = 30, oldind = width, newind = width * (height + 3), riprad = 3, ripplemap = [], last_map = [], ripple, texture, line_width = 20, step = line_width * 2, count = height / line_width; canvas.width = width; canvas.height = height; /* * Water ripple demo can work with any bitmap image */ with (ctx) { fillStyle = '#a2ddf8'; fillRect(0, 0, width, height); fillStyle = '#07b'; save(); rotate(-0.785); for (var i = 0; i < count; i++) { fillRect(-width, i * step, width * 3, line_width); } restore(); } texture = ctx.getImageData(0, 0, width, height); ripple = ctx.getImageData(0, 0, width, height); for (var i = 0; i < size; i++) { last_map[i] = ripplemap[i] = 0; } /** * Main loop */ function run() { newframe(); ctx.putImageData(ripple, 0, 0); } /** * Disturb water at specified point */ function disturb(dx, dy) { dx <<= 0; dy <<= 0; for (var j = dy - riprad; j < dy + riprad; j++) { for (var k = dx - riprad; k < dx + riprad; k++) { ripplemap[oldind + (j * width) + k] += 128; } } } /** * Generates new ripples */ function newframe() { var a, b, data, cur_pixel, new_pixel, old_data; var t = oldind; oldind = newind; newind = t; var i = 0; // create local copies of variables to decrease // scope lookup time in Firefox var _width = width, _height = height, _ripplemap = ripplemap, _last_map = last_map, _rd = ripple.data, _td = texture.data, _half_width = half_width, _half_height = half_height; for (var y = 0; y < _height; y++) { for (var x = 0; x < _width; x++) { var _newind = newind + i, _mapind = oldind + i; data = ( _ripplemap[_mapind - _width] + _ripplemap[_mapind + _width] + _ripplemap[_mapind - 1] + _ripplemap[_mapind + 1]) >> 1; data -= _ripplemap[_newind]; data -= data >> 5; _ripplemap[_newind] = data; //where data=0 then still, where data>0 then wave data = 1024 - data; old_data = _last_map[i]; _last_map[i] = data; if (old_data != data) { //offsets a = (((x - _half_width) * data / 1024) << 0) + _half_width; b = (((y - _half_height) * data / 1024) << 0) + _half_height; //bounds check if (a >= _width) a = _width - 1; if (a < 0) a = 0; if (b >= _height) b = _height - 1; if (b < 0) b = 0; new_pixel = (a + (b * _width)) * 4; cur_pixel = i * 4; _rd[cur_pixel] = _td[new_pixel]; _rd[cur_pixel + 1] = _td[new_pixel + 1]; _rd[cur_pixel + 2] = _td[new_pixel + 2]; } ++i; } } } canvas.onmousemove = function(/* Event */ evt) { disturb(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY); }; setInterval(run, delay); // generate random ripples var rnd = Math.random; setInterval(function() { disturb(rnd() * width, rnd() * height); }, 700); })();

 <canvas id="c"></canvas>

Answer 5

.paperButton {
  display: block;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 0;
  cursor:pointer;
}
.animate {
  -webkit-animation: ripple 0.65s linear;
  -moz-animation: ripple 0.65s linear;
  -ms-animation: ripple 0.65s linear;
  -o-animation: ripple 0.65s linear;
  animation: ripple 0.65s linear;
}
 @-webkit-keyframes 
ripple {  100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@-moz-keyframes 
ripple {  100% {
opacity: 0;
-moz-transform: scale(2.5);
}
}
@-o-keyframes 
ripple {  100% {
opacity: 0;
-o-transform: scale(2.5);
}
}
@keyframes 
ripple {  100% {
opacity: 0;
transform: scale(2.5);
}
}


$(function(){
    var ink, i, j, k;
    $(".paperButton").mousedown(function(e){    
            if($(this).find(".ink").length === 0){
                $(this).prepend("<span class='ink'></span>");
            }

            ink = $(this).find(".ink");
            ink.removeClass("animate");

            if(!ink.height() && !ink.width()){
                i = Math.max($(this).outerWidth(), $(this).outerHeight());
                ink.css({height: i, width: i});
            }

            j = e.pageX - $(this).offset().left - ink.width()/2;
            k = e.pageY - $(this).offset().top - ink.height()/2;

            ink.css({top: k+'px', left: j+'px'}).addClass("animate");

});
});

Answer 6

我找到了一个解决方案，如果您在https://imgur.com/上上传您的照片，然后在上传完成后按右键单击图像，然后复制图像地址并将其放入您的代码中，就像这样：background-image: url( https://i.imgur.com/yourphotolink.jpg ) 注意：复制链接后，检查链接是否以 .jpg 或 .png 结尾（如果以 .jpg 结尾？1 删除 ?1 以便链接以 .jpg 结尾）

我不知道为什么 jquery 涟漪效应不支持普通照片，但这些步骤将解决您的问题