Scroll Storytelling

滚动，是网页的时间轴

往下滚。每一屏演示一种获奖网站常用的滚动驱动手法。

向下滚动

进场不是“淡入”

直接 opacity 0 → 1 看起来像 PPT 动画。

真正的做法是三件事叠加：位移 + 透明度 + 错开延迟。

每行比上一行晚 80ms，眼睛会自动把它们读成一个“流”而不是一堆块。

缓动用 cubic-bezier(.16,1,.3,1)，开头快、结尾慢，手感就对了。

Pin + Horizontal

这一段的高度是 4 屏。滚动条在走，但画面被钉住，滚动进度被换算成卡片的横向位移。

外层给 420vh 高度，它只负责“占据滚动行程”，本身不显示任何东西。

当容器顶部越过视窗顶部，就给内层反向位移同等距离。视觉上它就“不动”了。

progress = 0→1，乘上“轨道总宽 - 视窗宽”，就是横向要走的距离。

永远用 translate3d，不要去改 left 或 margin。前者走 GPU 合成层，后者每帧重排。

超过 5 屏的固钉，用户会以为页面卡死了。给个进度指示会好很多。

背景层比滚动慢 20–30%，前景层快一点。大脑会把速度差异直接读成深度。
幅度宁小勿大：整个滚动行程内位移不要超过 200px，否则会变成廉价的“飘”。

滚动进度不只能驱动位移。它可以驱动数字、颜色、SVG 路径、视频帧——任何可以插值的东西。

上面四种手法几乎能拼出你在 Awwwards 上看到的 80% 滚动叙事页。差别只在于素材质量和节奏拿捏。