页面打开时是一片黑：中央一个 300 像素见方的视频框在轻微地“呼吸”，上面压着一个大标题，左右两侧竖排着栏目名，顶部一行片场编号，底部一行“向下滚动进入”。开始滚动，一连串事情按顺序发生——两侧栏目向外滑走，标题的每个字朝不同方向偏移、旋转、模糊，接着视频框边旋转边放大，整整转了三圈；标题彻底炸散消失；视频框定格一瞬，然后迅速铺满整个屏幕，画面压暗，底部的内容浮层由下而上揭开，标题逐字从下方翻起归位。右侧还有一条随滚动增长的进度条。

滚动本身也被接管了：用了惯性平滑滚动库，滚轮和触控板的输入会被转换成带阻尼的连续位移，配合动画的进度绑定，整段体验像在拖动一条时间轴而不是翻页。

这段首屏动画的四个层次

一条时间线管了二十多段动画。所有元素的动作都以精确的时间位置插入同一条时间线，再整体绑定滚动进度——因此每一帧的画面都是确定的，往回滚会精确还原。
标题被拆成了单字。用文字拆分库把标题切成字符元素，之后按索引给出不同的位移、旋转方向，奇偶交错加上从中心向两侧的错开延迟，才有“被气流撕开”的感觉。
缓动曲线是自定义的。脚本注册了三条贝塞尔曲线：一条厚重、一条柔和、一条急停，分别用在不同阶段。这是整段动画显得“有导演”的关键。
全屏后才揭浮层。浮层初始被裁剪成零高度并加了模糊，展开时先解除裁剪、再解除模糊、最后文字归位，三步错开，层次分明。

三个决定成败的技术点

其一，逐字动画的参数用函数而不是常量。给拆出来的字符设置属性时传的是函数，由索引决定值：

x: function (i) { return i % 2 === 0 ? -18 : 18; }

这样一句就让奇数位和偶数位反向移动，不需要为每个字写规则，字数变了也不用改代码。后面炸散阶段用的是按索引线性展开的位移，让字沿水平方向铺开的同时上下分离——两种写法配合，才既有秩序又有混乱。

其二，旋转值是累加而非归零的。视频框先转到 1080 度，后面那段“定格”又转到 1440 度。如果第二段写成 0 度，视频框会倒着转回去，观感完全不同。这类连续旋转必须一路往上加，这是很容易踩的坑。

其三，惯性滚动必须和滚动触发器对接。平滑滚动库接管了滚动位置，浏览器原生的滚动事件不再可靠，所以脚本把库的滚动回调直接接到触发器的更新方法上，并用动画引擎的计时器驱动库的每帧更新，还关掉了延迟平滑。三步缺一，就会出现动画卡顿或与滚动脱节。

拿到源码后能改什么

换视频只改一处路径，建议选画面简洁、没有硬字幕的素材——它全程会被旋转、缩放和压暗，细节太多反而糊。视频设置了静音、内联播放、循环，这是移动端自动播放能生效的必要条件，不要删。

文案分三块：首屏中央的引导语、视频框的四角标签、全屏后的内容浮层。侧边竖排栏目名是纯装饰，可按需增减，动画会自动应用到所有子元素上。右下角那个实时时间戳由脚本每秒更新，格式在一处模板字符串里。

节奏调整全在时间线上：每段动画的第三个参数就是它在时间线上的起始位置（0 到 1 表示整段行程的百分比）。想让视频更早铺满，把展开那段的起始位置提前即可；想拉长仪式感，就把整个首屏容器做得更高，滚动行程自然变长。配色变量集中在样式表顶部，黑白之外还预留了粉与米色两个点缀色。

运行提示：需要按顺序加载 GSAP、滚动触发、自定义缓动、惯性滚动与文字拆分五个库，页面从 CDN 引入，离线环境请先下载到本地。视频建议随包放在同目录下；由于自动播放策略，视频必须静音才会自动开始。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。

关于这个视频首屏的常见问题

可以换成图片而不是视频吗？

可以，把视频元素换成图片即可，所有动画作用在外层框和内层媒体上，与媒体类型无关。只是失去了画面本身的动态，建议配一张有质感的静帧。

中文标题也能逐字动画吗？

可以。文字拆分库按字符切分，中文同样有效，而且每个汉字宽度一致，炸散效果比英文更整齐。字数建议控制在二到六个字，太长时单字位移会显得杂乱。

手机上会不会太重？

整段动画包含大量模糊与合成，加上视频解码，低端机可能吃力。实用做法是在窄屏下简化：跳过旋转与逐字炸散，只保留放大与浮层揭开，动画时间线支持按条件构建。

惯性滚动会不会影响页面其他部分？

会，它接管的是整个页面的滚动。如果站点里有依赖原生滚动位置的组件（比如某些吸顶导航），需要改为从该库读取位置。只想在首屏使用时，也可以只保留动画部分、去掉平滑滚动。

它适合什么项目

这是典型的“作品集开场”：影视工作室、摄影师、创意机构、独立品牌的首页，或者新品发布、展览预告的专题页。仪式感强、信息量小，适合放在需要先建立氛围再讲内容的地方。时间线编排、逐字拆分、自定义缓动与惯性滚动对接的完整写法都在源码里，分段注释清楚，下载后可查看。