提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“吸顶头部收缩”(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
头部固定在顶部，读者稍微向下滚动后，平滑地收缩成更窄的条、Logo 也变小；回到顶部时再恢复原样。
头部尺寸变化时，不要让下方内容跳动。相似的动效
在里面滚动
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)。
用户向下滚动时，头部要向上滑出视野；只要向上滚动，就滑回来：快速、流畅，根据滚动方向而不是距离来反应。
在页面最顶部时始终显示，忽略细微的滚动抖动，并且当头部内有元素获得键盘焦点时保持显示。ABC
A
B
C
在里面滚动
Pinning (滚动固定)
别称 Pinned Section, Sticky Section, Scroll Pin
在一段滚动范围内，元素固定在原位，其他内容或动画继续推进。
适用场景
滚动驱动的叙事、功能展示
在[应用位置]添加“滚动固定”(Pinning)效果，也叫固定区块(pinned section)或 sticky section。
旁边的内容随滚动经过时，一个面板要固定在原位，并随正在阅读的步骤切换内容，区块结束时再解除固定。
优先使用原生的 sticky 定位，而不是劫持滚动；并确保在小屏幕上即使没有固定面板，每个步骤也依然易读。Scroll 中的其他动效
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)，就保持静止。A
在里面滚动
Zoom on Scroll (滚动缩放)
别称 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
随着用户滚动，元素或场景放大或缩小。
适用场景
首屏开场、图片放大展开
在[应用位置]添加“滚动缩放”(Zoom on Scroll)效果，也叫 scroll zoom 或 scale on scroll。
区块停留在视口中时，元素要随着滚动从一张小卡片平滑放大，直到铺满整个视口；向上滚动时再缩回去。
缩放时不要挤动周围的布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接以最终尺寸显示，不做缩放。