提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“平滑滚动”(Smooth Scroll)，也叫 smooth scrolling 或惯性滚动(inertia scroll)。
滚动和锚点跳转要顺滑地滑动并缓缓停下，而不是一顿一顿地跳动；手感要轻快灵敏，不要沉重拖沓。
保留键盘滚动、滚动条、页内查找等原生行为；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭平滑效果。相似的动效
A
B
C
D
在里面滚动
Scroll Snap (滚动吸附)
别称 Scroll Snapping, Snap Scrolling
滚动停止时会吸附到预设的位置，例如幻灯片或区块。
适用场景
轮播、整屏区块、图库
在[应用位置]添加“滚动吸附”(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
滚动停下时，视图要干净利落地吸附到最近的区块，让每个区块都对齐边缘，而不是停在半中间。
使用浏览器原生的吸附功能，让滚轮、触摸和键盘滚动都照常可用，并确保比视口更高的内容也能完整阅读。A
B
C
D
在里面滚动
Parallax (视差滚动)
别称 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
滚动时各图层以不同速度移动，营造出纵深感。
适用场景
首屏背景、落地页
在[应用位置]添加“视差滚动”(Parallax)效果，也叫 parallax scrolling 或视差图层(parallax layers)。
页面滚动时，背景图层要比内容移动得慢，越远的图层移动越少，营造含蓄的纵深感。
让效果紧跟滚动位置、没有延迟，文字放在正常速度的图层上；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭这个效果。Scroll 中的其他动效
A
B
C
D
在里面滚动
Stacking Cards (滚动堆叠卡片)
别称 Sticky Stacking Cards, Card Stack Scroll
滚动时卡片吸附在顶部并层层叠放，先前的卡片通常会略微缩小。
适用场景
功能列表、作品集
在[应用位置]添加“滚动堆叠卡片”(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
滚动时，每张卡片吸附在顶部附近，下一张卡片从下方滑上来盖住它，下面的卡片略微缩小，叠成整齐的一摞。
让每张先前的卡片露出一道细边，并给最后一张卡片留足空间，让它在区块结束前滑到位。在里面滚动
Sticky Header Shrink (吸顶头部收缩)
别称 Shrinking Header, Shrink on Scroll
用户向下滚动后，吸顶头部的高度或尺寸会缩小。
适用场景
导航栏
在[应用位置]添加“吸顶头部收缩”(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
头部固定在顶部，读者稍微向下滚动后，平滑地收缩成更窄的条、Logo 也变小；回到顶部时再恢复原样。
头部尺寸变化时，不要让下方内容跳动。A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
在里面滚动
Text Marquee on Scroll (滚动文字跑马灯)
别称 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
页面纵向滚动时，大号文字行横向滑动。
适用场景
品牌标语、首屏区块
在[应用位置]添加“滚动文字跑马灯”(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
页面向下滚动时，大号文字行横向滑动，相邻行朝相反方向移动；向上滚动时再滑回来。
让移动绑定滚动位置，不要让长文字行产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。