javascript - 滚动上的运动模糊效果

Question

我试图在滚动时对 HTML div 应用运动模糊效果。为此，我需要每 1/5 秒克隆一次每个 div，并在滚动时将其位置固定在页面上。我还需要每 1/5 秒降低每个 div 克隆的不透明度，并确保页面上一次只有 5 个 div 克隆(这样我就不会在页面上有数百个 div 克隆)几秒钟后页面)。是否可以使用此方法在 JavaScript 中创建运动模糊效果？

<div id = "blurOnScroll">
Create the illusion of a motion blur by creating clones of this div every 1/5 of a second, reducing the opacity of each clone every 1/5 of a second, and remove each clone as soon as it has completely faded away.
</div>
<script type = "text/javascript">
    function motionBlurEffect(){
        //create the illusion of a motion blur effect, as described above.
    }
</script>

Answer 1

此实现使用 SVG 高斯模糊滤镜。模糊的强度取决于您的滚动速度。

var blurFilter = document.getElementById('blur-kernel');
var html = $('html');
var prevPos = $(window).scrollTop();
var prevTime = Date.now();
var speed = 0;
var cheat = 0;

function blur() {
  cheat = 1 - cheat; // alternates between 0 and 1; used to force browser repaint by setting CSS

  let newPos = $(window).scrollTop();
  let newTime = Date.now()

  // distance over time times milliseconds per frame
  velocity = (newPos - prevPos) / Math.max(1, newTime - prevTime) * 1000 / 60;
  
  prevPos = newPos;
  prevTime = newTime;
  
  const STRENGTH = 1;
  blurSize = Math.max(0, Math.abs(velocity) / 2 * STRENGTH - 0.5);

  blurFilter.setStdDeviation(0, Math.floor(blurSize));
  blurFilter.setAttribute('stdDeviation', '0,' + blurSize);

  // forces browser repaint
  html.css('width', cheat + 'px');
  
  requestAnimationFrame(blur);
}

requestAnimationFrame(blur);

html {
  filter: url(#blur);
  -webkit-filter: url(#blur);
  will-change: filter, -webkit-filter;
  transform: translateZ(0);
  font: 16px sans-serif;
  line-height: 1.5;
}
body, img {
  /* setting the width of the body makes the
  html element's force-repaint "cheat" have no visible effect */
  width: calc(100vw - 20px); /* minus scrollbar */
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget tincidunt ipsum. Nullam metus mauris, scelerisque vel accumsan at, dapibus non odio. Cras volutpat malesuada tempus. Pellentesque vehicula posuere dolor et aliquet. Proin laoreet nisl sapien, ut congue neque placerat at. In ac nulla nec erat pretium egestas id ut orci. Vestibulum nec ultrices diam, sed efficitur ligula. Maecenas elementum molestie diam, vel mattis velit. Sed eu dignissim nibh, quis sollicitudin dolor. Praesent interdum pharetra aliquam. Maecenas mi est, semper nec dui euismod, semper interdum sem. Vestibulum sed porttitor purus. Ut convallis non urna non blandit. Quisque pharetra dolor ac ex dictum ultrices. Vestibulum cursus hendrerit elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<img src='https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg'>
<p>
Praesent mi nisl, dictum nec velit tincidunt, vestibulum congue purus. Nam venenatis elit lectus, quis fringilla felis dictum sed. Etiam ac lacus a neque lobortis rhoncus at vitae felis. In dapibus massa massa. Integer semper egestas interdum. Praesent augue magna, ultrices at consectetur eget, semper sit amet sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sollicitudin libero tortor, at gravida justo suscipit et. Maecenas euismod tellus eget lectus sollicitudin, nec consequat mauris porta. Aliquam vitae dolor ut ante commodo volutpat non sed leo. Donec malesuada justo tempus enim aliquet cursus. Pellentesque magna lectus, rhoncus ac porttitor at, congue vitae eros.
</p>
<p>
Proin ultricies dignissim arcu. Maecenas felis nunc, convallis non turpis at, laoreet dictum velit. Proin euismod libero ut orci commodo, in consequat orci fringilla. Donec ac congue mauris, lacinia mollis risus. Maecenas lorem diam, pulvinar quis est non, ornare cursus libero. Quisque ut magna sed arcu hendrerit facilisis eget vitae risus. In gravida nunc nec arcu tincidunt finibus. Nam sem ligula, vulputate in lorem ut, lobortis feugiat purus. Etiam placerat arcu efficitur risus pharetra eleifend. Nunc consectetur urna quis sapien placerat molestie. Vestibulum commodo elit nec facilisis varius. Ut ut posuere nisl, vitae pharetra enim. Aliquam molestie viverra venenatis.
</p>
<img src='https://photographycourse.net/wp-content/uploads/2014/11/Landscape-Photography-steps.jpg'>
<p>
Quisque tempus, sem et malesuada ornare, orci leo pulvinar nisi, laoreet vestibulum augue sem vitae nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi quis commodo lorem. Sed ac scelerisque mauris, in lobortis ligula. Curabitur vestibulum blandit auctor. Aenean viverra turpis in dui tincidunt, vitae auctor quam faucibus. Sed id risus cursus, vehicula lorem at, tincidunt mi. Aenean maximus porttitor magna cursus interdum. Etiam sit amet mattis quam. Fusce sodales sodales porta. In hendrerit, velit eget tempus pretium, sapien tortor rutrum enim, eget aliquet libero velit et libero. Aliquam a consequat sem. Integer feugiat ut quam eu finibus. Sed rhoncus eleifend viverra. Mauris at viverra nulla, sit amet ultrices diam.
</p>
<p>
In sagittis nisi quis mi tristique mollis. Sed vulputate orci quis leo commodo, eu auctor orci tincidunt. Nullam eget posuere felis, in ultricies nibh. Nunc congue lorem sed elit fringilla lacinia. Vivamus ac ante tempor, ultricies ante nec, volutpat eros. Aenean laoreet justo imperdiet metus placerat accumsan. Quisque odio nibh, venenatis sit amet dignissim ut, tempor ultrices libero.
</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">
  <defs>
    <filter id="blur">
      <feGaussianBlur id="blur-kernel" in="SourceGraphic" edgeMode='duplicate' stdDeviation="0,0" />
    </filter>
  </defs>
</svg>

我正在 MacBook Pro 上对其进行测试，Chrome 是唯一可以流畅运行此运动模糊效果的浏览器。它在 Safari 和 Firefox 中非常缓慢，我认为这是由于不同的渲染技术。