滚动模糊揭示特效（模糊到清晰入场，强度实时可调）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟页面滚动：标题、段落与卡片都先以模糊状态进入视口，再逐渐对上焦。模糊强度滑块实时生效，「重新播放」一键重看。

完整代码

<div class="sb-scroller" id="sbScroller" style="--sb-blur: 14px">
  <h3 class="sb-item">模糊揭示：让注意力自然聚焦</h3>
  <p class="sb-item">文字先模糊进入视口，再逐渐清晰……</p>
</div>

.sb-item {
  opacity: 0;
  filter: blur(var(--sb-blur, 14px));
  transform: translateY(18px);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}
.sb-item.in { opacity: 1; filter: blur(0); transform: none; }

const io = new IntersectionObserver(entries => {
  entries.forEach(en => {
    if (en.isIntersecting) {
      en.target.classList.add('in');   // 进入视口 → 模糊清零
      io.unobserve(en.target);
    }
  });
}, { root: scroller, threshold: 0.2 });
items.forEach(el => io.observe(el));

实现要点：初始状态叠加 filter: blur(14px)、透明度 0 与轻微下移，进入视口后过渡回清晰。模糊半径用 CSS 变量 --sb-blur 统一控制，滑块只改这一个变量即可全局生效，无需改动 JS。

参数说明

兼容性与性能

• 模糊滤镜由 GPU 加速，动画只操作 filter、opacity、transform 三个合成器属性，不触发布局重排
• IntersectionObserver 异步调度，滚动过程零 JS 计算；触发一次后立即 unobserve，长页面零残余开销
• 建议控制同时处于模糊状态的元素数量（不超过一屏），大面积长时间模糊会增加 GPU 负载
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android 现代版本），无需任何 polyfill

常见问题

Q: 模糊过渡在低端手机上会掉帧吗？ 模糊滤镜虽由 GPU 加速，但低端机连续大范围 blur 仍可能掉帧。建议把模糊半径控制在 16px 内、避免整屏元素同时模糊，本组件演示的规模无压力。

Q: 模糊和淡入一起用会看不清吗？ 不会。本组件把模糊、透明度、位移三者叠加，入场过程「先雾后清」，观感反而更聚焦；如果只要其中一种，删掉对应属性即可。

Q: 为什么模糊切换时文字边缘会闪一下？ 这是部分浏览器对 blur 过渡的合成瑕疵。可给 .sb-item 加 will-change: filter 提前建层，或把动画时长加长到 0.7s 以上缓解。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。