提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“滚动缩放”(Zoom on Scroll)效果，也叫 scroll zoom 或 scale on scroll。
区块停留在视口中时，元素要随着滚动从一张小卡片平滑放大，直到铺满整个视口；向上滚动时再缩回去。
缩放时不要挤动周围的布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接以最终尺寸显示，不做缩放。相似的动效
Ken Burns Effect (肯·伯恩斯效果)
别称 Slow pan and zoom, Ken Burns, Kenburns
静态图片在框内缓慢缩放并平移。
适用场景
首屏幻灯片、背景
在[应用位置]添加“肯·伯恩斯效果”(Ken Burns Effect)，也叫 slow pan and zoom。
每张图片显示时只朝一个方向非常缓慢地缩放、漂移，然后交叉淡入到下一张，下一张朝另一个方向移动：平静而连续。
让每张图片在任何时刻都铺满整个框，绝不露出边缘；如果用户开启了“减少动态效果”(prefers-reduced-motion)，让图片保持静止。A
在里面滚动
Scroll-Linked Animation (滚动驱动动画)
别称 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
动画进度直接绑定滚动位置，向前滚动时播放，向回滚动时倒放。
适用场景
叙事型页面、进度效果
在[应用位置]添加“滚动驱动动画”(Scroll-Linked Animation)，也叫 scroll-driven animation 或滚动擦洗(scroll scrub)。
动画要严格跟随滚动位置：向下滚动时正向播放，向上滚动时当场倒放，自身不带基于时间的缓动。
把整段动画映射到一个明确的滚动区间；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就显示一个合理的静态状态。将鼠标悬停在上面
Hover Zoom (图片悬停放大)
别称 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
悬停时图片在框内放大，有时还会随指针平移。
适用场景
产品卡片、缩略图
在[应用位置]添加“图片悬停放大”(Hover Zoom)效果，也叫 image zoom on hover 或 zoom-pan。
指针停在图片上时，图片在框内缓慢平滑地放大，框的尺寸保持不变；指针移开后平滑复原。
把图片裁剪在框内，不要溢出布局；键盘焦点时也显示同样的放大效果。A
B
C
D
在里面滚动
Parallax (视差滚动)
别称 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
滚动时各图层以不同速度移动，营造出纵深感。
适用场景
首屏背景、落地页
在[应用位置]添加“视差滚动”(Parallax)效果，也叫 parallax scrolling 或视差图层(parallax layers)。
页面滚动时，背景图层要比内容移动得慢，越远的图层移动越少，营造含蓄的纵深感。
让效果紧跟滚动位置、没有延迟，文字放在正常速度的图层上；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭这个效果。Scroll 中的其他动效
在里面滚动
Hide on Scroll Header (滚动隐藏头部)
别称 Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
向下滚动时头部隐藏，向上滚动时重新出现。
适用场景
移动端和长页面的导航栏
在[应用位置]添加“滚动隐藏头部”(Hide on Scroll Header)，也叫 headroom 或自动隐藏导航栏(auto-hide navbar)。
用户向下滚动时，头部要向上滑出视野；只要向上滚动，就滑回来：快速、流畅，根据滚动方向而不是距离来反应。
在页面最顶部时始终显示，忽略细微的滚动抖动，并且当头部内有元素获得键盘焦点时保持显示。A
B
C
D
E
在里面滚动
Horizontal Scroll Section (横向滚动区块)
别称 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
纵向滚动时，一排被固定的面板横向移动。
适用场景
图库、作品集、时间线
在[应用位置]添加“横向滚动区块”(Horizontal Scroll Section)，也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
区块到达顶部时要固定住，向下滚动时让其中的一排面板横向移动，最后一个面板出现后再解除固定。
横向移动要直接跟随滚动位置，往回滚动时反向移动；在小屏幕上，或者如果用户开启了“减少动态效果”(prefers-reduced-motion)，就改为可以正常滑动的横排。