提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“滚动文字跑马灯”(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
页面向下滚动时，大号文字行横向滑动，相邻行朝相反方向移动；向上滚动时再滑回来。
让移动绑定滚动位置，不要让长文字行产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。相似的动效
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (跑马灯)
别称 Ticker, Infinite Scroll Text
一行内容横向无缝地无限循环滚动。
适用场景
Logo 墙、公告条、关键词横幅和新闻滚动条
在[应用位置]添加“跑马灯”(Marquee)，即水平方向无限滚动的条带，也叫 ticker。
内容从右向左以缓慢、匀速的速度滚动，无缝循环，衔接处不能出现跳动。
鼠标悬停时暂停；如果用户开启了“减少动态效果”(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)，就改为可以正常滑动的横排。ABCABCABCABCABC
在里面滚动
Text Repetition (文字重复)
别称 Repeated Text Scroll
一个词被复制成许多层叠的副本，随滚动错开移动。
适用场景
作品集标题
在[应用位置]添加“文字重复”(Text Repetition)效果，也叫 repeated text scroll。
把一个词复制成一叠更淡的描边副本，随用户滚动从它身后展开，向上滚动时再收拢回去。
让展开程度直接绑定滚动位置，并对屏幕阅读器隐藏多余的副本，让这个词只被读一次。ABCABCABC
在里面滚动
Sliced Text (切片文字)
别称 On-Scroll Sliced Text
标题被切成若干水平切片，页面滚动时切片彼此错开、横向移动。
适用场景
编辑风格的首屏
在[应用位置]添加“切片文字”(Sliced Text)效果，也叫 on-scroll sliced text。
把一个大标题切成若干水平切片，开始时对齐成完整的词，用户滚动时切片彼此错开、横向滑动。
让错位直接跟随滚动位置，往回滚动时随之还原；对屏幕阅读器保持标题为一段完整可读的文字。Scroll 中的其他动效
A
在里面滚动
Zoom on Scroll (滚动缩放)
别称 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
随着用户滚动，元素或场景放大或缩小。
适用场景
首屏开场、图片放大展开
在[应用位置]添加“滚动缩放”(Zoom on Scroll)效果，也叫 scroll zoom 或 scale on scroll。
区块停留在视口中时，元素要随着滚动从一张小卡片平滑放大，直到铺满整个视口；向上滚动时再缩回去。
缩放时不要挤动周围的布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接以最终尺寸显示，不做缩放。在里面滚动
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)。
用户向下滚动时，头部要向上滑出视野；只要向上滚动，就滑回来：快速、流畅，根据滚动方向而不是距离来反应。
在页面最顶部时始终显示，忽略细微的滚动抖动，并且当头部内有元素获得键盘焦点时保持显示。