提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 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 定位,而不是劫持滚动;并确保在小屏幕上即使没有固定面板,每个步骤也依然易读。