把网站做成视频：如何让它自动滚动

打开页面，打开开发者工具（F12，Mac 上是 ⌥ ⌘ I），把下面的代码粘贴到控制台（Console）里，按回车。它会先等三秒，让你启动录屏软件，然后在你设定的时间内沿一条缓入缓出曲线从顶部滚到底部。

const SECONDS = 20;        // 滚动持续多久
const WAIT = 3;            // 留给你启动录屏软件的时间

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' 很关键。很多网站设置了 scroll-behavior: smooth，它会把脚本的每一次小幅移动都变成一段单独的动画，卡顿立刻就回来了。
• requestAnimationFrame 在每一个显示帧移动一次页面，所以滚动能均匀到显示器允许的极限。
• 运行之前先手动滚到底再滚回来一次，让懒加载的图片提前就位，页面高度就不会在录制中途变化。
• 基于 Lenis 或 Locomotive Scroll 这类平滑滚动库搭建的网站会自己处理滚动，可能会和脚本打架。如果页面滚得一冲一顿，原因就在这里。

脚本仍然把帧率交给了你的录屏软件和电脑。渲染器把这两者都去掉了：Website Scroll Video 先把整个页面读取一遍，再为一段锁定 24、30 或 60 fps 的视频逐帧计算页面应在的位置，所以再重的页面也不会掉帧，再长的页面也不会跑偏。你设定的东西和脚本一样，按秒、按曲线，而且在花任何点数之前就能预览结果。

以“屏”为单位量一下页面：页面总高度除以窗口高度。一个典型的落地页有五到八屏。然后：

比一秒一屏还快，文字就会糊成一片，在 30 fps 或 GIF 里尤其明显。比三秒一屏还慢，观众就会走神。如果某个区块比其他的更重要，在那里停顿一下，比整个页面都放慢要好；Website Scroll Video 最多支持 6 处停顿，每处 0.5 到 5 秒。

• 柔和（缓入缓出）。 从静止起步，平稳行进，再回到静止。默认就该用它：两端看起来都是有意为之，而不是被硬生生截断。
• 滑行（缓出）。 起步很快，随后慢慢滑停，就像在触控板上轻轻一甩。适合需要一开场就有劲头的短预告。
• 匀速。 全程一个速度。最适合背景循环，因为任何节奏变化都会引人注目。
• 脉冲。 移动一个区块，停稳，再移动。看起来像有人在一页页翻看网站，很适合产品导览。

一段往下滚、然后直接切回顶部的视频，循环时会有明显的跳动。改为沿同一条曲线往下滚再滚回顶部：最后一帧和第一帧对上，循环就天衣无缝。在 Website Scroll Video 里，这就是「往返滚动」播放模式，还可以选择在返回前于底部停留，以及在循环重新开始前于顶部停留。