什么是运动模糊

看下面这张图片效果，相信大家就能知道运动模糊是什么样了，想了解更多的可自行百度啊，这里只讲解实现方式，不讲解原理

feGaussianBlur高斯模糊-属性

• in: in属性标识给定过滤器原语的输入。
• stdDeviation👍: 它定义了平滑模糊操作的标准偏差，默认值为0。2个参数时为(水平，垂直)模糊方向
• edgeMode: 它表示输入层边的多余像素。

 <svg style="display: none">
      <defs>
        <filter id="blur">
          <feGaussianBlur in="SourceGraphic" stdDeviation="0 0" />
        </filter>
      </defs>
    </svg>

然后就是通过控制stdDeviation的平滑偏差，进而实现模糊效果

<!-- 水平模糊 -->
<feGaussianBlur stdDeviation="20 1" />

<!-- 垂直模糊 -->
<feGaussianBlur stdDeviation="1 20" />

gsap实现横向滚动模糊

简单说下实现原理：

1. 引用 gsap 的 scrollTrigger 插件;
2. 监听并获取滚动速率 getVelocity();
3. 修改stdDeviation的参数值;

在线代码中有详细注释，这里不做过多阐述