वेबसाइट की पृष्ठभूमि पर पानी की लहर प्रभाव

Question

एक ग्राहक ने मुझे अपनी वेबसाइट पर पृष्ठभूमि छवि (और केवल पृष्ठभूमि छवि) पर a similar water ripple effect लागू करने के लिए कहा है।

ध्यान में रखते हुए कि यह कैनवास का उपयोग कर रहा है, ऐसा लगता है कि यह संभव नहीं है। क्या किसी को इस तरह के प्रभाव से अवगत है कि मैं केवल पृष्ठ पर पृष्ठभूमि छवि पर आवेदन कर सकता हूं?

Answer 1

उच्च प्रदर्शन के लिए, वेबजीएल संचालित समाधान, इस परियोजना पर एक नज़र डालें:

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