页面滚动触发背景视频逐帧播放实现方案求助

一、前期素材准备（After Effects 部分） #

• 打开你的AE视频项目，调整好画面尺寸和时长，确保和网页背景的需求匹配
• 导出帧序列：点击「合成」→「添加到渲染队列」，渲染设置里选择「JPEG序列」，设置好输出路径和文件名前缀（比如frame_），导出后会得到按顺序命名的frame_0001.jpg、frame_0002.jpg这类文件

二、网页实现（HTML/CSS/JS 部分） #

1. HTML 结构 #

准备背景容器和足够高度的滚动区域：

<div class="scroll-video-bg"></div>
<div class="content-spacer"></div>

2. CSS 样式 #

固定背景容器铺满视口，用 spacer 撑高页面：

.scroll-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.content-spacer {
  height: 5000px; /* 根据总帧数调整高度，确保滚动范围足够覆盖所有帧 */
}

3. JavaScript 逻辑 #

监听滚动事件，按滚动进度切换对应帧：

// 配置参数，和AE导出的素材对应
const frameCount = 100; // 你的总帧数
const framePrefix = 'frame_';
const frameExt = '.jpg';

const bgContainer = document.querySelector('.scroll-video-bg');

// 滚动事件处理
window.addEventListener('scroll', () => {
  // 计算滚动进度：当前滚动距离 / 页面可滚动总高度
  const scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  // 计算当前要显示的帧索引，避免超出范围
  const currentFrame = Math.min(Math.floor(scrollProgress * frameCount), frameCount - 1);
  // 拼接帧路径，注意补零和AE导出的命名一致
  const framePath = `${framePrefix}${String(currentFrame + 1).padStart(4, '0')}${frameExt}`;
  // 更新背景图
  bgContainer.style.backgroundImage = `url(${framePath})`;
});

// 初始化显示第一帧
window.dispatchEvent(new Event('scroll'));

三、优化建议 #

• 图片压缩：用批量压缩工具（比如 TinyPNG）处理导出的JPG，减少加载体积
• 预加载：提前预加载部分帧，避免滚动时卡顿：

  // 预加载前20帧示例
  for (let i = 1; i <= 20; i++) {
    const img = new Image();
    img.src = `${framePrefix}${String(i).padStart(4, '0')}${frameExt}`;
  }
  

• 节流优化：给滚动事件加节流，降低触发频率：

  function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
      const now = Date.now();
      if (now - lastCall >= delay) {
        lastCall = now;
        func(...args);
      }
    };
  }
  
  window.addEventListener('scroll', throttle(() => {
    // 原滚动逻辑代码
  }, 16)); // 对应约60fps的触发间隔
  

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