ウェブサイトのバックグラウンドに対する水の波及効果

Question

クライアントは、自分のウェブサイトの背景画像（および背景画像のみ）にa similar water ripple effectを適用するよう依頼しました。

これはキャンバスを使用していることを考慮すると、これは可能ではないようです。誰かがこのような効果を知っているのですが、私はページ上の背景画像だけに適用できますか？

Answer 1

高性能WebGLパワードソリューションについては、このプロジェクトをご覧ください：

jQuery WebGL Ripples

デモはhere可能です。

この技術は、まだすべてのデバイスの誰もが利用できるわけではありません。

Answer 2

この2つのデモをご覧ください。これはあなたの作成に基づいていると思います。

29a.chと mrdoob

Hope this helps 

Answer 3

わからないあなたはまだ見ているが、これは効果に優れたデモ/チュートリアルを持っている場合： http://code.almeros.com/water-ripple-canvas-and-javascript#.Ukpfe2QY2ok

デモはここにある： http://code.almeros.com/code-examples/water-effect-canvas/#.UkpiQmQY2ol

Answer 4

.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 5

私が投稿したスクリプトを試してみると、コピーしてコードに貼り付けるだけで動作します。私はコードのコメントで説明した

(function(){ 
    var canvas = document.getElementById('c'), 

     /** @type {CanvasRenderingContext2D} */ 
     ctx = canvas.getContext('2d'), 
     width = 400, 
     height = 400, 

     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); 
})();