Fable 5 案例：不用 video 标签的滚动背景动画

在社交平台上，一位粉丝只有 153 的独立开发者发布了一则网站 demo：整个页面的背景是一段 36 秒的染料入水影片，滚动条就是它的播放进度条，往下滚，影片前进；往上滚，影片倒退；停下来，画面定格在当前位置。这条 demo 发布后拿到约 3.5 万次浏览，557 次收藏远超 384 次点赞，收藏高于点赞，通常说明内容被当作资料存下来研究。真正让技术圈兴奋的，是作者特意强调的一句话：No video tag。不用 video 标签，整段影片是怎么跟着滚动播放的？本文拆解这个案例的思路，并给出一条可复现的技术路线。

滚动驱动的染料入水背景动画效果

这个 demo 做了什么

这是一个沐浴与身体护理品牌的网站模板概念，作者给它的定位是"张扬的"（loud）。画面里，彩色染料滴入清水，缓慢晕染、扩散、交融，视觉上正好呼应护理产品的流动感与色彩意象。整段影片长约 36 秒，完整连续，不是循环播放的短素材。

真正的看点在交互设计：背景不是自动播放的视频，而是由滚动驱动的画面。用户滚到哪里，影片就播到哪里；页面的文案、产品卡片和交互元素浮在这层动态背景之上，随滚动节奏依次出现。滚动速度决定播放快慢，滚动方向决定前进还是倒退，整个网站因此有了一种把网页当影片来"擦洗"的操控感。

作者提到，这个效果和站内所有交互，是靠"链式组合多种技术"（chaining multiple techniques）实现的，而搭建工具是 Fable 5。按他的说法，Fable 5 让创建交互式网站变得容易多了。他还预告，后续会发布一条完整的技术拆解视频。

No video tag 为什么是点睛之笔

直觉上，"滚动控制视频播放"最自然的做法是用 HTML 的 video 元素：监听滚动事件，把 currentTime 设置成与滚动比例对应的时间点。听起来一行代码的事，做起来全是坑。

首先是 seek 精度问题。浏览器对视频随机跳转的定位精度有限，滚动过程中频繁设置 currentTime，画面容易出现跳跃和闪烁。其次是解码延迟：每次 seek，浏览器都要定位并重新解码目标帧，视频解码是重操作，而滚动是高频事件，两者叠加，掉帧几乎不可避免。移动端还要再难一层：iOS Safari 对视频的程序化控制有诸多限制，自动播放需要静音，seek 行为也不完全一致。

所以业内做"丝滑的滚动视频"，主流思路一直是绕开 video 元素。

video 标签方案与帧序列方案的对比

帧序列加 Canvas：业界通行解法

不用 video 标签，最可能也最经典的方案，是把视频拆成逐帧图片，用 Canvas 按滚动进度绘制对应的帧。这也是 Apple、Stripe 等公司产品页上常见的 scroll video 技术。核心流程四步：

预处理：用 ffmpeg 把影片抽成连续图片序列。30fps 的 36 秒影片理论上有 1080 帧，考虑体积通常会抽稀到一两百帧；
加载：把帧图片预加载，或按滚动位置按需加载；
映射与绘制：监听滚动，算出当前滚动比例对应的帧号，用 drawImage 把那一帧画上画布；
优化：用 requestAnimationFrame 节流，滚动监听加 passive 标记，避免高频重绘。

滚动驱动 Canvas 动画的处理管线

这套方案丝滑的原因，在于把"视频解码"这个重活从运行时挪到了预处理阶段：用户下载的是已经解码好的图片，滚动时只剩一次 GPU 加速的 drawImage，画一张现成的图，滚多快都不卡。作者说的"链式组合多种技术"，大概率还包括管理元素进出场时机的 Intersection Observer、绑定滚动与动画的 GSAP ScrollTrigger，以及纯 CSS 的 Scroll-Driven Animations 新标准。作者没有公开全部实现细节，以上是基于效果的合理推断，等他的技术拆解视频发布后可以对照验证。

Fable 5 在其中的角色

帧序列、Canvas、滚动绑定，这些技术点单独看都不新鲜，GitHub 上一搜一大把。难的是把它们"链"起来：抽帧的参数、预加载的策略、滚动手感的调校、前景元素与背景节奏的配合、移动端的适配，再加上把染料入水的意象和品牌调性对上的审美决策。过去，这需要一个由设计师、动效师和前端组成的小团队协作完成；而在这个案例里，它出自一位独立创作者之手，工具是 Fable 5。

这也是这则 demo 背后的真正信号：这一代 AI 建站工具把"凑齐技术栈"的成本从几个月压到了几天，一个有审美的个体，可以产出过去一个团队才能做出的品牌级交互体验。

想复现，可以走这五步

第一步，准备素材。找一段流动感强的视频，染料入水、墨汁扩散、烟雾、咖啡搅拌都可以，时长控制在 10 到 40 秒，太长帧数太多，体积会失控。

第二步，抽帧。一条 ffmpeg 命令：

bash

# 每秒抽 10 帧，限制 1920 宽，36 秒约得 360 帧
ffmpeg -i input.mp4 -vf "fps=10,scale=1920:-1" frames/frame_%04d.jpg

第三步，绑定滚动与绘制。核心逻辑用几行伪代码就能说清：

javascript

const progress = scrollY / (docHeight - winHeight);     // 滚动比例
const frame = Math.round(progress * (totalFrames - 1)); // 对应帧号
requestAnimationFrame(() => {
  ctx.drawImage(frames[frame], 0, 0, canvas.width, canvas.height);
});

第四步，叠加前景内容。文案和产品卡片用 CSS 叠在画布上方，用 Intersection Observer 或 ScrollTrigger 控制它们的进出场时机。

第五步，把精细活交给 AI 工具迭代。滚动手感、帧预加载策略、移动端适配、前景与背景的节奏配合，都可以交给 Fable 5 这类工具反复打磨。写提示词时，描述目标体验而不是实现步骤：背景是染料入水的影片，滚动控制播放，不用 video 标签，用 Canvas 帧序列；先做一个两秒视频的最小原型验证丝滑度，通过后再扩展到完整版。