提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 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),就直接以最终尺寸显示,不做缩放。