Как создать эффект Воды?

Очень хотелось бы узнать как можно реализовать эффект воды которое используетсья  тут

Сразу при заходе на сайт пролистайте наверх чтобы чтобы не ждать а потом увидит
картинки с эффектами воды или как там их называют .Я назвал вода потому что это более близко

Пожалуйста без jQuery



.blue {
  background-image:url("//i.stack.imgur.com/Zt1S7.jpg");
  width:400px;
  height:400px;
  background-size:cover;
}






    

Ответы

Ответ 1

Такой эффект достигается средствами WebGL, как уже комментировал ваш
вопрос Максим Ленский, есть реализация такого эффекта на Codrops
тут и тут.
Так же можно использовать библиотеку PixiJS. Пример:
https://www.goodboydigital.com/pixijs/examples/15/indexAll.html
Пример как вариант реализации на SVG. Анимация не точная, но сам
принцип я продемонстрирую. 



  Решение с SVG я бы не рекомендовал, т.к. потестировав на больших
  изображениях, оказалось что Chrome не справляется с анимацией фильтров, в то
  время как Firefox показывает нормальную производительность. Для решения подобных задач я рекомендую использовать первые 2 варианта. 




var img = document.querySelector("#filter feTurbulence");
var frames = 0;
var rad = Math.PI / 360;

function AnimateBaseFrequency() {
  bfx = .04;
  bfy = .04;
  frames += 3;
  bfx += 0.01 * Math.sin(frames * rad);
  bfy += 0.01 * Math.cos(frames * rad);
  bf = bfx.toString() + ' ' + bfy.toString();
  img.setAttributeNS(null, 'baseFrequency', bf);
  window.requestAnimationFrame(AnimateBaseFrequency);
}

window.requestAnimationFrame(AnimateBaseFrequency);
.test {
  -webkit-filter: url("#filter");
  filter: url("#filter");
  position: relative;
  transform: scale(1.05);
 }
 
 #imgWrapper {
   overflow:hidden;
   position: absolute;
   top:0;
   left:0;
   z-index: 1000;
 }






Ответ 2

Анимация начинается при наведении курсора на картинку
begin="img1.mouseover"
анимация заканчивается -  end="img1.mouseout", либо по окончании
времени анимации - dur="18s"




.container {
width:60%;
height:60%;
}








Настроить величину, интервал волн, можно изменяя параметры
baseFrequency="0.0001" и атрибут scale="25"
Настроить  нужный для себя размер картинки, можно изменяя проценты
ширины и высоты контейнера  class="container"     


Приложение адаптивно и работает во всех современных браузерах, кроме IE


Ответ 3

Простенький пример на WebGL/GLSL - балуемся текстурными координатами в зависимости от времени 



let pid, timeLocarion, gl = canvas.getContext('webgl');
let loader = new Image();
loader.crossOrigin = "anonymous"
loader.src = "https://i.imgur.com/tbmyMTo.jpg"
loader.onload = function() { 
    
    canvas.width = loader.width/3;
    canvas.height = loader.height/3;
    
    pid = gl.createProgram();
    shader(`
      attribute vec2 c;
      
      void main(void) {
        gl_Position = vec4(c.xy, 0., 1.);
      }
    `, gl.VERTEX_SHADER);
    
    shader(`
      precision lowp float;
      uniform vec2 size;
      uniform float time; 
      uniform sampler2D tex;
      
      void main(void) {
        vec2 p = gl_FragCoord.xy / size.xy;
        float s = 0.0;
        // несколько итераций смещения текстурных координат в 
        // разных направлениях по кругу, на немного разный шаг, зависящий от времени
        for (int i = 0; i < 5; i++) {
            vec2 adjc = p;
            float theta = 2.0 * 3.1415 / 11.*float(i);
            adjc.x += cos(theta)*time*0.1 + time * 0.03;
            adjc.y -= sin(theta)*time*0.1 - time * 0.07;
            s += cos(
              (adjc.x*cos(theta) - 
               adjc.y*sin(theta))*15.0
            ) * 3.1415;
        }
        p += sin(s)*0.01;
        gl_FragColor = texture2D(tex, p);
      }
    `, gl.FRAGMENT_SHADER);
    gl.linkProgram(pid);
    gl.useProgram(pid);

    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,3,-1,-1,3,-1]), gl.STATIC_DRAW);

    let al = gl.getAttribLocation(pid, "c");
    gl.vertexAttribPointer(al, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(al);

    let texture = gl.createTexture();
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, loader);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    gl.uniform1i(gl.getUniformLocation(pid, "tex"), 0);
    timeLocation = gl.getUniformLocation(pid, 'time');
    let sizeLocation = gl.getUniformLocation(pid, 'size');
    gl.uniform2f(sizeLocation, gl.drawingBufferWidth, gl.drawingBufferHeight)
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    requestAnimationFrame(draw)
  }
  
function draw(t) {
  gl.clearColor(0, 0, 0, 0);
  gl.uniform1f(timeLocation, t/1000);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(draw)
}

function shader(src, type) {
  let sid = gl.createShader(type);
  gl.shaderSource(sid, src);
  gl.compileShader(sid);
  gl.attachShader(pid, sid);
}