主页 / 问题 / 822070
Accepted
Demon __
Asked:2020-05-02 16:35:45 +0000 UTC2020-05-02 16:35:45 +0000 UTC

如何打造水效果？

  • 772

我真的很想知道如何实现 这里使用的水的效果

进入网站后立即向上滚动，不要等待，然后你会看到带有水效果的图片或任何它们的名字。我叫水是因为它更接近

请不要jQuery

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

</div>

javascript

3 个回答

  1. Best Answer
    1. 这种效果是使用 WebGL 实现的，正如 Maxim Lensky 已经评论过你的问题，在 Codrops here和here上有一个这样的效果实现。
    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>

    • 29

    • 当您将鼠标悬停在图像上时动画开始 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://isstatic.askoverflow.dev/hHGO8.jpg" width="100%" height="100%" filter="url(#myFilter)" /> 
  </svg>
</div>

    • 调整波浪的幅度、间隔，可以改变参数 baseFrequency="0.0001"和属性scale="25"

    • 通过改变容器的宽高百分比来调整你需要的图片大小 class="container"

    该应用程序是响应式的，适用于所有现代浏览器，除了IE

    • 21

  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);
}
    <canvas id="canvas"></canvas>

    • 9

相关问题