JavaScript滚动reveal动画如何设置同行元素依次入场延迟

核心逻辑：对齐现有900px的响应式断点，仅在桌面端横向flex布局下，给同一行的.reveal元素按顺序添加递增的过渡延迟，移动端保持原有纵向堆叠无延迟的效果。 #

1. 补充CSS样式 #

在原有CSS代码末尾追加以下规则，控制不同顺序元素的动画延迟：

/* 全局默认无延迟，适配移动端纵向布局 */
.reveal {
  transition-delay: 0s;
}

/* 桌面端横向布局下的错位动画规则，断点与原有移动端规则一致 */
@media (min-width: 901px) {
  .reveal.stagger-1 { transition-delay: 0.15s; }
  .reveal.stagger-2 { transition-delay: 0.3s; }
  .reveal.stagger-3 { transition-delay: 0.45s; }
}

每级0.15s的延迟差视觉节奏适中，如果需要更快/更慢的依次入场效果，同步调整这里的延迟数值即可。 #

2. 替换原有JS逻辑 #

把原来的滚动监听JS替换为以下代码，自动计算同行元素的错位类、适配窗口尺寸变化：

const MOBILE_BREAKPOINT = 900;

// 按布局状态给元素设置/清除错位延迟类
function updateStaggerEffect() {
  const isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
  // 遍历所有横向排列的卡片容器
  document.querySelectorAll('.text-container').forEach(container => {
    const revealCards = container.querySelectorAll('.reveal');
    revealCards.forEach((card, index) => {
      // 先清除旧的错位类
      card.classList.remove('stagger-1', 'stagger-2', 'stagger-3');
      // 非移动端才按顺序添加错位类
      if (!isMobile) {
        card.classList.add(`stagger-${index + 1}`);
      }
    });
  });
}

function reveal() {
  const reveals = document.querySelectorAll(".reveal");
  const windowHeight = window.innerHeight;
  const elementVisible = 150;

  for (let i = 0; i < reveals.length; i++) {
    const card = reveals[i];
    const cardTop = card.getBoundingClientRect().top;
    const isInViewport = cardTop < windowHeight - elementVisible;

    if (isInViewport) {
      // 已激活的元素跳过，避免重复触发动画
      if (!card.classList.contains('active')) {
        card.classList.add('active');
      }
    } else {
      card.classList.remove('active');
    }
  }
}

// 页面初始化执行
updateStaggerEffect();
reveal();
// 监听滚动触发动画
window.addEventListener('scroll', reveal);
// 窗口尺寸变化时重新适配错位效果，兼容横竖屏切换
window.addEventListener('resize', () => {
  updateStaggerEffect();
  reveal();
});

补充说明 #

• 如果后续单个横向容器内的卡片数量超过3个，只需在CSS中按现有规律追加.stagger-4、.stagger-5等对应延迟规则即可，JS会自动按元素顺序匹配类名
• 原有移动端纵向堆叠的逻辑完全不受影响，和之前的效果保持一致
• 元素离开视口后会自动重置动画状态，下次滚动进入视口时会重新触发依次入场效果

内容的提问来源于stack exchange，提问作者kyllaz