滚动卡片交错入场特效（网格卡片错峰动画，方向可调）

效果演示（真实可交互）

演示区用内嵌滚动容器模拟页面滚动，8 张卡片组成 2×4 网格。滚动时卡片按「每批 4 张、批内每张延迟 90ms」的节奏交错入场，方向控件可切换四种动效。

完整代码

<div class="sct-scroller" id="sctScroller">
  <div class="sct-grid">
    <div class="sct-card"><h4>极光渐变</h4></div>
    <!-- 更多卡片…… -->
  </div>
</div>

.sct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sct-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .55s ease, transform .55s ease;
}
.sct-card.in { opacity: 1; transform: none; }

const cards = scroller.querySelectorAll('.sct-card');
let batch = [];

const io = new IntersectionObserver(entries => {
  entries.forEach(en => {
    if (en.isIntersecting) {
      batch.push(en.target);
      io.unobserve(en.target);
      if (batch.length >= 4) revealBatch();   // 攒够一批就播放
    }
  });
  setTimeout(() => { if (batch.length) revealBatch(); }, 80);
}, { root: scroller, threshold: 0.2 });

function revealBatch() {
  batch.forEach((card, i) => {
    card.classList.add('in');
    card.style.transitionDelay = (i * 90) + 'ms';  // 批内错峰
    setTimeout(() => { card.style.transitionDelay = ''; }, 900);
  });
  batch = [];
}

核心思路：观察器把进入视口的卡片收集进「批次」，攒满 4 张（或滚动停顿后不足一批）统一播放；批内每张卡片的 transition-delay 依次递增 90ms，形成波浪般的错峰入场。方向切换只需替换 .sct-card 的初始 transform。

参数说明

兼容性与性能

• 每张卡片只触发一次动画，触发后立即 unobserve，观察队列随滚动自然清空，长网格零残余开销
• 动画只操作 opacity 与 transform（含 perspective 翻转），均在合成器线程完成，不触发布局重排
• IntersectionObserver 异步调度，滚动过程不产生密集计算；延迟用 transition-delay 实现而非 JS 定时器，更省资源
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android 现代版本），无需任何 polyfill

常见问题

Q: 最后几张卡片一直不出现？ 当剩余卡片不足一批时不会触发播放，本组件用「滚动停顿 80ms 兜底」解决；正式使用时也可在 unobserve 后立即播放。

Q: 每批 4 张的节奏是怎么来的？ 网格是 2 列，一屏大约能放下 4 张，以「一屏」为批单位最自然。改成 3 列网格时把批大小设为 6 即可保持节奏。

Q: 切换方向后动画会重新播放吗？ 会。本组件切换方向时先移除所有 .in 类并清空延迟，再重建观察器，保证新方向从头生效。

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