Question

我需要JS上的脚本，这将改变这种“水波纹”风格的图像/ html（对不起，6MB GIF文件！）：

http://fcunited.ru/_temp/listening2.gif

任何lib？我只找到了这个：http://code.almeros.com/code-examples/water-effect-canvas/#.T1DPAXmuG_R

但这并不是我所需要的。

Answer 1

如果HTML5是一个选项（用加载图像的画布替换图像），您可以从演示中提取此效果并调整大小和位置的效果（包括源代码）：

http://js1k.com/2010-first/demo/131

Answer 2

这是Jonas Wagner最初创建的水波纹效果。

var floor = Math.floor;

function loadImage(callback) {
    var img = document.getElementById('bg');
    callback(img);
}

function getDataFromImage(img) {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.clearRect(0, 0, img.width, img.height);
    ctx.drawImage(img, 0 ,0);
    return ctx.getImageData(0, 0, img.width, img.height);
}

function disturb(x, y, z){
    if(x < 2 || x > width-2 || y < 1 || y > height-2)
        return;
    var i = x+y*width;
    buffer0[i] += z;
    buffer0[i-1] -= z;
}

function process(){
    var img = ctx.getImageData(0, 0, width, height),
        data = img.data,
        i, x;

    // average cells to make the surface more even
    for(i=width+1;i<size-width-1;i+=2){
        for(x=1;x<width-1;x++,i++){
            buffer0[i] = (buffer0[i]+buffer0[i+1]+buffer0[i-1]+buffer0[i-width]+buffer0[i+width])/5;
        }
    }

    for(i=width+1;i<size-width-1;i+=2){
        for(x=1;x<width-1;x++,i++){
            // wave propagation
            var waveHeight = (buffer0[i-1] + buffer0[i+1] + buffer0[i+width] + buffer0[i-width])/2-buffer1[i];
            buffer1[i] = waveHeight;
            // calculate index in the texture with some fake referaction
            var ti = i+floor((buffer1[i-2]-waveHeight)*0.08)+floor((buffer1[i-width]-waveHeight)*0.08)*width;
            // clamping
            ti = ti < 0 ? 0 : ti > size ? size : ti;
            // some very fake lighting and caustics based on the wave height
            // and angle
            var light = waveHeight*2.0-buffer1[i-2]*0.6,
                i4 = i*4,
                ti4 = ti*4;
            // clamping
            light = light < -10 ? -10 : light > 100 ? 100 : light;
            data[i4] = texture.data[ti4]+light;
            data[i4+1] = texture.data[ti4+1]+light;
            data[i4+2] = texture.data[ti4+2]+light;
        }
    }
    aux = buffer0;
    buffer0 = buffer1;
    buffer1 = aux;
    ctx.putImageData(img, 0, 0);
}
var canvas = document.getElementById('c'),
    ctx = canvas.getContext('2d'),
    width = 320,
    height = 240,
    size = width*height,
    buffer0 = [],
    buffer1 = [],
    aux, i, texture;

for(i=0;i<size;i++){
    buffer0.push(0);
    buffer1.push(0);
}

loadImage(function(img){
    texture = getDataFromImage(img);
    canvas.width = width;
    canvas.height = height;
    ctx.fillRect(0, 0, width, height);
    setInterval(process, 1000/60);
    resizeBy(width-innerWidth, height-innerHeight);
});

canvas.onmousemove = function(e){
    disturb(
            floor(e.clientX/innerWidth*width),
            floor(e.clientY/innerHeight*height),
            15000);
}

<img id="bg" src="data:image/png;base64,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ARMwgX9DwBvxv+Hqo5qACZjAzQRkI97eyE//n5r8xl5j9Xks681P50L9mBGN1ff8dAIbE68/hiHNS6R1ZtRH8r359V9xbj9S2y5rtyvbnCSXuXcIkf7b7vYzpy/C6LXe/GIWmAvPT9Dot41JWzrtbuQoe/1sJH73/tH/56F8J25rZ7uLuG26zEwUYojitlncCFtpT1jfgZif58frJ3aHfmt/5IpNw/tHtX/2jRhgYdmU4dZqezDltkLbeFvDuLO+s5hYmV+DMjHZMp6fsW7wvH46iWlWfv76eed1j7Of/Ig7kuOeOGzzt7tJQ8Nel7Adgzhs87c76xuazgdAOx8Je31vjXyrbXfmt0MJJgLsYDTKxzwfNfObmZnfMS3HjByZfc3FnO1f4Uwz9wS/6XPE7SqDPHC4cuxWIdbeKsdhqOXY+sEWRsok88qx9lrf6SiTzCvH2mt+5hcEdCbyvORYez9ifuRTE2Nj4EEvWR5ce6qc1tWvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatSvequcatTPvdNGrI32TcAETMAEXkPAG/FrOPtRTMAETGBJwBvxEo0LJmACJvAaAt6IX8PZj2ICJmACSwLeiJdoXDABEzCB1xB4nz6fln+UJ89hWdKC+qINd1nSgvrWTwSWaLSg/qQ2/yUaLahvfhOBJRotqD+pPX9LNHvh/W3/Vcz2weTtw3GRf2v/bbYHB1IO9iafYra+UzG/bUw8P14/3j8e2j///Gf7PfDYeGMVxWaiH1TuW3KQjex2i4W27zht+2l31puf58frx/vHM/vndo247abbLttt31Ri1yUvftuEI95uh0+f9Q3LwQ0uPRv3g5n69JlfQ2R+gWG7MRfiH2suytRn6/U78wh6B8uDWaRyX48/i1/6YR1Prj37dKc19bVtlY8eralv/SCw4mJ+nh+dDfXH9MyMNO/5mdl8PX5pI84v3rV4dULXdNSth8Rj1vwe44bK/CDxmDW/x7ihGvye3Ig5oK0JmIAJmMCjBLwRP0rOOhMwARP4IALeiD8IpA9jAiZgAo8SODbicbXisUNZ/xg3VOYHices+T3G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" style="display:none;">
<canvas id="c" style="position: absolute; top:0; left:0; width:100%;height:100%; "></canvas>

Answer 3

.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");

});
});

Javascript - 水波纹效果

3 个答案: