Html 网站背景上的水波纹效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17667487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Water ripple effect on background of website
提问by Jeffrey Ray
A client has asked me to apply a similar water ripple effectto the background image (and only the background image) on their website.
一位客户要求我将类似的水波纹效果应用于他们网站上的背景图像（并且仅是背景图像）。
Considering that this is using a canvas, it doesn't seem possible. Is anyone aware of an effect like this that I can apply to just the background image on a page?
考虑到这是使用画布，似乎不可能。有没有人知道这样的效果，我可以只应用于页面上的背景图像？
采纳答案by Gilberto Torrezan
回答by Thanos
回答by Nathan Do
Not sure if you are still looking but this has a good demo/tutorial on the effect: http://code.almeros.com/water-ripple-canvas-and-javascript#.Ukpfe2QY2ok
不确定你是否还在寻找，但这有一个关于效果的很好的演示/教程：http: //code.almeros.com/water-ripple-canvas-and-javascript#.Ukpfe2QY2ok
Demo is here: http://code.almeros.com/code-examples/water-effect-canvas/#.UkpiQmQY2ol
演示在这里：http: //code.almeros.com/code-examples/water-effect-canvas/#.UkpiQmQY2ol
回答by droid
Try using the script i have posted, it will work just copy and paste it into your code. i have explained with the comments in the code
尝试使用我发布的脚本，只需将其复制并粘贴到您的代码中即可。我已经用代码中的注释进行了解释
(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>回答by Himanshu mishra
.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");
});
});
回答by Ahmed Medhat
I found a solution for this ,if you upload your photo on https://imgur.com/then after upload finishes press right click on image then copy image address and put it into your code just like this: background-image: url(https://i.imgur.com/yourphotolink.jpg) NOTE:after copying the link check that your link ends with .jpg or .png if it ends with .jpg?1 delete ?1 so your link ends with .jpg
我找到了一个解决方案，如果您将照片上传到https://imgur.com/然后在上传完成后按右键单击图像然后复制图像地址并将其放入您的代码中，就像这样：background-image: url( https://i.imgur.com/yourphotolink.jpg) 注意：复制链接后，检查链接是否以 .jpg 或 .png 结尾，如果以 .jpg 结尾？1 删除 ?1 以便链接以 .jpg 结尾
i don't know why jquery ripple effect doesn't support ordinary photos but these steps will solve your problem
我不知道为什么 jquery 涟漪效应不支持普通照片，但这些步骤将解决您的问题
