29

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

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

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

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

</div>

9
  • 1
    Судя по всему там WebGL, потому как у меня вообще ничего нет))
    – vp_arth
    2 мая 2018 в 8:42
  • @vp_arth выходит не получится сделать ? ноууу =(
    – Randall
    2 мая 2018 в 8:45
  • как же покажешь тут? там три или 5 всяких плагинов ... и работает это на webgl на самом деле , на codrops есть реализация этого эффекта ... здесь писанины очень много ...tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects
    – user33274
    3 мая 2018 в 3:52
  • 1
    я знаю что она есть - просто многих плагинов jQuery нету в cdn а вы написали что без jQuery , а это библиотека и есть javascript а webGL как раз реализовывается на js
    – user33274
    3 мая 2018 в 6:28
  • 1
    да... локальный хостинг - не работает с "рабочего стола"
    – user33274
    3 мая 2018 в 6:51

3 ответа 3

31
  1. Такой эффект достигается средствами WebGL, как уже комментировал ваш вопрос Максим Ленский, есть реализация такого эффекта на Codrops тут и тут.
  2. Так же можно использовать библиотеку PixiJS. Пример: https://www.goodboydigital.com/pixijs/examples/15/indexAll.html
  3. Пример как вариант реализации на 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;
 }
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters" width="275" height="183" viewBox="0 0 220 220">
  <defs>
    <filter id="filter">
      <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turbulence" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="10" in="SourceGraphic" in2="turbulence" />
    </filter>
  </defs>
</svg>
<div id="imgWrapper">
<img class="test" src="https://img4.goodfon.ru/wallpaper/middle/4/e8/makro-klematis-lomonos-lepestki-1.jpg"/>
</div>

4
  • @Alexandr_TT обновил пример, работает теперь в FF
    – Pavel
    9 мая 2018 в 19:54
  • вижу, оперативно исправили. FF строг, но справедлив :) 9 мая 2018 в 20:02
  • нашёл я объяснение ... feTurbulence - не видел я ранье этого фильтра ...хороший пример ...
    – user33274
    9 мая 2018 в 20:50
  • обновил пример с SVG: заменил механизм анимации, изображение, убрал обрывы по краям.
    – Pavel
    10 мая 2018 в 0:17
22
  • Анимация начинается при наведении курсора на картинку begin="img1.mouseover"

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

.container {
width:60%;
height:60%;
overflow:hidden;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"   viewBox="0 0 500 300">
  <defs>
    <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
     <animate attributeName="baseFrequency" dur="18s" values="0.0001;0.02;0.0001;0.02;0.0001" begin="img1.mouseover" end="img1.mouseout" />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
    </filter>
  </defs>
<image id="img1" xlink:href="https://i.stack.imgur.com/hHGO8.jpg" width="100%" height="100%" filter="url(#myFilter)" /> 
  </svg>
</div>

  • Настроить величину, интервал волн, можно изменяя параметры baseFrequency="0.0001" и атрибут scale="25"

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

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

1
  • 4
    Выглядит эффектно=)
    – Arthur
    10 мая 2018 в 14:12
8

Простенький пример на 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);
}
<canvas id="canvas"></canvas>

2
  • а тут комментарии к коду нету .
    – Randall
    16 июн 2019 в 14:05
  • @Demon__ANT да, но тут и кода то нет:) 16 июн 2019 в 14:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.