SCROLL EFFECT
图片缩放进场Zoom-in Reveal / Ken Burns
图片以 1.1-1.2 倍缓慢放大或从放大回缩，让静图有纪录片般的呼吸感。
效果预览
缓慢推近的运镜，静图也有呼吸感
适合用在哪
Hero 背景、全屏图区、作品集封面、酒店/旅行站。
容易踩的坑
- 缩放速度太快或时长短于 4 秒，电影感变成镜头抖动，还可能引发不适。
- 对 4K 大图做持续 scale 动画，移动端 GPU 内存吃紧，滚动明显卡顿。
- 叠加文案的深色渐变遮罩不足，图片亮部区域文字对比度低于 4.5:1。
设计提示词 · Prompt
图片缩放进场（Zoom-in Reveal / Ken Burns）：图片初始 scale(1.08-1.15)，进入视口后 6-10s 缓慢过渡到 scale(1)（或反向从 1 缓推到 1.15 并持续循环 alternate）。必须 overflow:hidden 裁切 + transform-origin 取偏角位置（如 30% 40%）产生横移+缩放的复合运镜。加上一层从下到上的深色渐变遮罩放置文案。关键在"慢"——速度低于 0.05 倍/秒才有电影感，快了就变成抖动。多图轮播时每张图交替推近/拉远，方向错开。
Zoom-in Reveal / Ken Burns: the image starts at scale(1.08-1.15) and, after entering the viewport, slowly transitions to scale(1) over 6-10s (or the reverse, slowly pushing from 1 to 1.15 and looping with alternate). Must use overflow:hidden for clipping + a transform-origin at an off-center position (e.g. 30% 40%) to produce a combined pan + zoom camera move. Add a bottom-to-top dark gradient overlay to hold the copy. The key is "slow" — only a speed below 0.05x per second feels cinematic; faster becomes jitter. In multi-image carousels, alternate zoom-in/zoom-out for each image, staggering the direction.
常见搭配
同一页面里经常和「图片缩放进场」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-zoomrev"> <div class="d-zoomrev__img"></div> <div class="d-zoomrev__cap">缓慢推近的运镜，静图也有呼吸感</div> </div>