提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“滚动吸附”(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
滚动停下时，视图要干净利落地吸附到最近的区块，让每个区块都对齐边缘，而不是停在半中间。
使用浏览器原生的吸附功能，让滚轮、触摸和键盘滚动都照常可用，并确保比视口更高的内容也能完整阅读。相似的动效
A
B
C
点击试试
Carousel Slide (轮播滑动)
别称 Slider, Swipe carousel, Scroll-snap carousel
幻灯片在可视区域内水平移动，每次吸附一张到位。
适用场景
首屏横幅、商品图库
在[应用位置]添加“轮播滑动”(Carousel Slide)，也叫滑块(slider)或滑动轮播(swipe carousel)。
每一步都让整排横向滑动，使下一张幻灯片吸附到中间，平滑减速；两侧边缘露出相邻的幻灯片，位置圆点也跟着变化。
每次只移动一张，除了按钮和方向键，也支持触屏滑动，并给控件加上供屏幕阅读器读取的标签。在里面滚动
Smooth Scroll (平滑滚动)
别称 Smooth Scrolling, Inertia Scroll
滚动和锚点跳转带缓动地平滑滑动，而不是生硬地跳动。
适用场景
锚点导航、追求高级质感的页面
在[应用位置]添加“平滑滚动”(Smooth Scroll)，也叫 smooth scrolling 或惯性滚动(inertia scroll)。
滚动和锚点跳转要顺滑地滑动并缓缓停下，而不是一顿一顿地跳动；手感要轻快灵敏，不要沉重拖沓。
保留键盘滚动、滚动条、页内查找等原生行为；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭平滑效果。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)，就改为可以正常滑动的横排。A
B
C
D
在里面滚动
Stacking Cards (滚动堆叠卡片)
别称 Sticky Stacking Cards, Card Stack Scroll
滚动时卡片吸附在顶部并层层叠放，先前的卡片通常会略微缩小。
适用场景
功能列表、作品集
在[应用位置]添加“滚动堆叠卡片”(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
滚动时，每张卡片吸附在顶部附近，下一张卡片从下方滑上来盖住它，下面的卡片略微缩小，叠成整齐的一摞。
让每张先前的卡片露出一道细边，并给最后一张卡片留足空间，让它在区块结束前滑到位。Scroll 中的其他动效
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)，就显示一个合理的静态状态。在里面滚动
Scroll-Triggered Animation (滚动触发动画)
别称 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
元素进入或离开视口时，动画播放一次。
适用场景
淡入区块、延迟显现
在[应用位置]添加“滚动触发动画”(Scroll-Triggered Animation)，也叫滚动显现(reveal on scroll)或 animate on scroll。
每个元素进入视口时只播放一次：淡入并向上滑到位，按自己快速顺滑的节奏播放，而不是跟随滚动位置。
脚本加载失败时内容也要可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接显示元素。