实验 · 前端实验室

一个只会滚动的页面

没有 JavaScript。所有运动都直接来自你滚动的位置。

滚动即时间轴

第一段 · clip-path 从中间切开

一条边被拉长，视线就跟着走了。不需要箭头，也不需要提示。

新的压在旧的上面。旧的不用动，被盖住这件事本身就说明了顺序。

快慢由你滚多快决定。页面不再替我安排时间，它只负责比例。

滑到底，画面也要停在一个能看的位置——不是戛然而止的空白。

揭幕

堆叠

横扫

填色

留白

收束

最后一段 · 背景沿着文字往上走

技术：CSS animation-timeline（scroll()、view()、命名 view timeline）。目前 Chrome / Edge 支持，Safari 尚未支持——不支持的浏览器会看到没有动画的静止版本。