MOTION HUB

缩放滚动

Zoom Scroll
#zoom-scroll · 72/72
SCROLL · 滚动查看

参数调改

PLAYGROUND
起始缩放--zoom_from
0.30.9
结束缩放--zoom_to
0.91.3
卡面底色--card_bg
强调色--accent
底色--base

实现要点

NOTES
  1. 01

    wrap 定高 280vh、舞台 sticky 100vh:进度 = (scrollY − wrapTop) / (wrap高 − 视口高),纯几何计算,无需测量卡片尺寸、没有 resize 陷阱。

  2. 02

    scale 前套一层 smoothstep(p²(3−2p))把线性进度磨成两端减速——直接线性映射的缩放在起点会有『突然开始动』的机械感。

  3. 03

    只写 transform + opacity(合成器路径);卡片 will-change 提升独立层,投影用固定值放卡上,避免逐帧重算阴影。

  4. 04

    zoom_from > zoom_to 就是『由近推远』,反过来是『由远拉近』;两端差值建议 ≤ 0.6,过大会有强烈的镜头眩晕。

  5. 05

    映射由滚动位置驱动,reduced-motion 下保留跟随用户滚动(不隐藏内容、不自动播放);demo 自动滚动为预览辅助,用户操作即停。

源代码

SOURCE

加载源代码…