web-dev-qa-db-ja.com

ウェブサイトの背景に水の波及効果

クライアントから、Webサイトの背景画像（および背景画像のみ）に 同様の波紋効果 を適用するように依頼されました。

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

javascripthtmlcsshtml5graphics
19
Jeffrey Ray

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

jQuery WebGL Ripples

デモが利用可能です こちら 。

ただし、このテクノロジーはまだすべてのデバイスのすべてのユーザーが利用できるわけではありません。

19
Gilberto Torrezan

これら2つのデモをご覧ください。これらのデモは、あなたが作成したものに基づいて入手できると思います。

29a.ch および mrdoob

お役に立てれば

9
Thanos

あなたがまだ探しているかどうかはわかりませんが、これは効果の良いデモ/チュートリアルを持っています： http://code.almeros.com/water-ripple-canvas-and-javascript#.Ukpfe2QY2ok

デモはこちら： http://code.almeros.com/code-examples/water-effect-canvas/#.UkpiQmQY2ol

4
Nathan Do

投稿したスクリプトを使用してみてください。コピーしてコードに貼り付けるだけで動作します。コード内のコメントで説明しました

(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);
})();
2
droid
.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");

});
});
1
Himanshu mishra

https://imgur.com/ に写真をアップロードした場合、これを解決する方法を見つけました。アップロードが完了したら、画像を右クリックして、画像アドレスをコピーし、次のようにコードに追加します。 ：background-image：url（ https://i.imgur.com/yourphotolink.jpg ）注：リンクをコピーした後、リンクが.jpgまたは.pngで終わることを確認してください。 jpg？1？1を削除して、リンクが.jpgで終わるようにします

jqueryリップル効果が通常の写真をサポートしない理由はわかりませんが、これらの手順で問題が解決します

0
Ahmed Medhat