SCROLL EFFECT
滚动缩放过渡Scroll Zoom Transition
滚动时整个画面或关键词向观者放大推近，制造"冲进屏幕里"的过场。
效果预览
ONE MORE THING
适合用在哪
章节转场、品牌宣言、视频开场式的页面过场。
容易踩的坑
- 动画属性里混入 width、font-size 而非只用 transform，200vh 区段内持续重排掉帧。
- blur 滤镜作用在全屏大图层上，移动端每帧重绘开销极大，滚动明显卡顿。
- 同一页面用了三四次缩放转场，冲击力被稀释，用户只觉得滚动距离变长。
设计提示词 · Prompt
滚动缩放过渡（Scroll Zoom Transition）：一个 200vh 的滚动段，视觉内容 sticky 钉在视口；滚动进度映射到 scale 0.8→1.15 + opacity 0.4→1（前半段）再反向（后半段），配合轻微的 blur(0→8px→0) 或亮度变化，营造穿过一扇门的感觉。务必 transform-only。文案与背景层可以给不同系数形成内层视差。这个效果适合做页面章节之间的"呼吸转场"，一页用一次就够。
Scroll Zoom Transition: a 200vh scroll segment with the visual content sticky-pinned in the viewport; scroll progress maps to scale 0.8→1.15 + opacity 0.4→1 (first half) and then reverses (second half), combined with a slight blur(0→8px→0) or brightness change, creating the feeling of passing through a door. Strictly transform-only. Copy and background layers can use different factors to create inner parallax. This effect suits a "breathing transition" between page chapters; once per page is enough.
常见搭配
同一页面里经常和「滚动缩放过渡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-scrollzoom"> <div class="d-scrollzoom__halo"></div> <span class="d-scrollzoom__word">ONE MORE THING</span> </div>