提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“滚动隐藏头部”(Hide on Scroll Header)，也叫 headroom 或自动隐藏导航栏(auto-hide navbar)。
用户向下滚动时，头部要向上滑出视野；只要向上滚动，就滑回来：快速、流畅，根据滚动方向而不是距离来反应。
在页面最顶部时始终显示，忽略细微的滚动抖动，并且当头部内有元素获得键盘焦点时保持显示。相似的动效
在里面滚动
Sticky Header Shrink (吸顶头部收缩)
别称 Shrinking Header, Shrink on Scroll
用户向下滚动后，吸顶头部的高度或尺寸会缩小。
适用场景
导航栏
在[应用位置]添加“吸顶头部收缩”(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
头部固定在顶部，读者稍微向下滚动后，平滑地收缩成更窄的条、Logo 也变小；回到顶部时再恢复原样。
头部尺寸变化时，不要让下方内容跳动。A
Slide Out (滑出)
别称 Slide Out Up, Slide Out Down
元素滑出容器边缘后消失。
适用场景
关闭抽屉和面板
在[应用位置]添加“滑出”(Slide Out)退场动画，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器边缘后消失：快速，离开时加速。
在容器边缘处裁切，移出视野后对键盘和屏幕阅读器也隐藏；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则立即隐藏。A
Slide In (滑入)
别称 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素从容器边缘之外滑入到停靠位置，不带淡入效果。
适用场景
抽屉、侧边栏、横幅
在[应用位置]添加“滑入”(Slide In)入场动画，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素从容器边缘之外滑到停靠位置，全程保持完全不透明：快速，平滑减速，不要回弹。
在容器边缘处裁切，避免它在外面时遮住相邻元素或产生滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示。Scroll 中的其他动效
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
在里面滚动
Parallax (视差滚动)
别称 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
滚动时各图层以不同速度移动，营造出纵深感。
适用场景
首屏背景、落地页
在[应用位置]添加“视差滚动”(Parallax)效果，也叫 parallax scrolling 或视差图层(parallax layers)。
页面滚动时，背景图层要比内容移动得慢，越远的图层移动越少，营造含蓄的纵深感。
让效果紧跟滚动位置、没有延迟，文字放在正常速度的图层上；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭这个效果。ABC
A
B
C
在里面滚动
Pinning (滚动固定)
别称 Pinned Section, Sticky Section, Scroll Pin
在一段滚动范围内，元素固定在原位，其他内容或动画继续推进。
适用场景
滚动驱动的叙事、功能展示
在[应用位置]添加“滚动固定”(Pinning)效果，也叫固定区块(pinned section)或 sticky section。
旁边的内容随滚动经过时，一个面板要固定在原位，并随正在阅读的步骤切换内容，区块结束时再解除固定。
优先使用原生的 sticky 定位，而不是劫持滚动；并确保在小屏幕上即使没有固定面板，每个步骤也依然易读。