javascript - sexta - Efecto de la ondulación del agua en el fondo del sitio web

al fondo hay sitio décima temporada

Question

Un cliente me ha pedido que aplique un efecto de ondulación de agua similar a la imagen de fondo (y solo a la imagen de fondo) en su sitio web.

Teniendo en cuenta que se trata de un lienzo, no parece posible. ¿Alguien sabe de un efecto como este que pueda aplicar solo a la imagen de fondo de una página?

Answer 1

Eche un vistazo a estas 2 demostraciones, en las que creo que puede basarse para crear la suya.

29a.ch y mrdoob

Espero que esto ayude

Answer 2

Intente usar el script que he publicado, funcionará, solo cópielo y péguelo en su código. He explicado con los comentarios en el código.

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

Answer 3

No estoy seguro si todavía está buscando, pero esto tiene una buena demostración / tutorial sobre el efecto: http://code.almeros.com/water-ripple-canvas-and-javascript#.Ukpfe2QY2ok

La demostración está aquí: http://code.almeros.com/code-examples/water-effect-canvas/#.UkpiQmQY2ol

Answer 4

Para una solución potenciada con WebGL de alto rendimiento, eche un vistazo a este proyecto:

jQuery WebGL Ondulaciones

Una demo está disponible here .

Sin embargo, esta tecnología aún no está disponible para todos en todos los dispositivos.

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

});
});