提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“视差滚动”(Parallax)效果，也叫 parallax scrolling 或视差图层(parallax layers)。
页面滚动时，背景图层要比内容移动得慢，越远的图层移动越少，营造含蓄的纵深感。
让效果紧跟滚动位置、没有延迟，文字放在正常速度的图层上；如果用户开启了“减少动态效果”(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)，就显示一个合理的静态状态。A
在里面滚动
Zoom on Scroll (滚动缩放)
别称 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
随着用户滚动，元素或场景放大或缩小。
适用场景
首屏开场、图片放大展开
在[应用位置]添加“滚动缩放”(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)，让图片保持静止。Scroll 中的其他动效
ABC
A
B
C
在里面滚动
Pinning (滚动固定)
别称 Pinned Section, Sticky Section, Scroll Pin
在一段滚动范围内，元素固定在原位，其他内容或动画继续推进。
适用场景
滚动驱动的叙事、功能展示
在[应用位置]添加“滚动固定”(Pinning)效果，也叫固定区块(pinned section)或 sticky section。
旁边的内容随滚动经过时，一个面板要固定在原位，并随正在阅读的步骤切换内容，区块结束时再解除固定。
优先使用原生的 sticky 定位，而不是劫持滚动；并确保在小屏幕上即使没有固定面板，每个步骤也依然易读。在里面滚动
Scroll Progress Indicator (滚动进度条)
别称 Reading Progress Bar, Progress Bar
随着用户滚动页面或文章，进度条或圆环逐渐填满。
适用场景
文章、长页面
在[应用位置]添加“滚动进度条”(Scroll Progress Indicator)，也叫阅读进度条(reading progress bar)。
顶部的一条细条要随着读者滚动的距离从左向右填充，到末尾时铺满整个宽度。
直接绑定滚动位置，不要有缓动延迟，也不要遮挡内容。A
B
C
D
在里面滚动
Scroll Snap (滚动吸附)
别称 Scroll Snapping, Snap Scrolling
滚动停止时会吸附到预设的位置，例如幻灯片或区块。
适用场景
轮播、整屏区块、图库
在[应用位置]添加“滚动吸附”(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
滚动停下时，视图要干净利落地吸附到最近的区块，让每个区块都对齐边缘，而不是停在半中间。
使用浏览器原生的吸附功能，让滚轮、触摸和键盘滚动都照常可用，并确保比视口更高的内容也能完整阅读。