SCROLL · 滚动查看
参数调改
PLAYGROUND
起始缩放--zoom_from
0.30.9
结束缩放--zoom_to
0.91.3
卡面底色--card_bg
强调色--accent
底色--base
实现要点
NOTES- 01
wrap 定高 280vh、舞台 sticky 100vh:进度 = (scrollY − wrapTop) / (wrap高 − 视口高),纯几何计算,无需测量卡片尺寸、没有 resize 陷阱。
- 02
scale 前套一层 smoothstep(p²(3−2p))把线性进度磨成两端减速——直接线性映射的缩放在起点会有『突然开始动』的机械感。
- 03
只写 transform + opacity(合成器路径);卡片 will-change 提升独立层,投影用固定值放卡上,避免逐帧重算阴影。
- 04
zoom_from > zoom_to 就是『由近推远』,反过来是『由远拉近』;两端差值建议 ≤ 0.6,过大会有强烈的镜头眩晕。
- 05
映射由滚动位置驱动,reduced-motion 下保留跟随用户滚动(不隐藏内容、不自动播放);demo 自动滚动为预览辅助,用户操作即停。
源代码
SOURCE
加载源代码…