滚动触发
Scroll-triggered 元素进入视窗时播放一次入场动画，动画进度与滚动位置无关，播完即止。
适合用在：卡片、图片的入场
可以这样跟 AI 说
请给内容卡片添加滚动触发入场效果（Scroll-triggered）：进入视口时淡入并轻微上移，每张卡只播放一次。动画按固定时长播放，不跟随滚动距离；减少动效时直接显示内容。
想要这种滚动效果，怎么跟 AI 说？
看 16 种效果演示，找到名称，再复制一段清楚的需求描述发给 AI。
滚动联动
Scroll-linked 把动画进度直接绑定滚动进度：滚到一半，动画就播到一半，进退都跟随。
适合用在：随滚动推进的动画
可以这样跟 AI 说
请做滚动联动动画（Scroll-linked）：这段内容从进入视口到离开视口时，元素从左向右移动。动画进度绑定这段的滚动进度，停止滚动就停，往回滚则倒放；减少动效时静态显示。
视差滚动
Parallax 滚动时让不同图层以不同速度位移，从而产生纵深与立体感。
适合用在：有层次的首屏背景
可以这样跟 AI 说
请在首屏做轻微视差滚动（Parallax）：背景比前景文字移动得慢，产生层次感。只作用于首屏，文字保持清楚；移动端减小位移，减少动效时关闭视差。
吸顶吸附
Sticky 元素滚动到阈值后固定在视口，滚出容器范围后自动释放。
适合用在：目录、导航或固定说明
可以这样跟 AI 说
请让这段内容的目录吸顶（Sticky）：滚到视口顶部时固定，留出固定页头的高度；只在所属内容区域内固定，区域结束就释放，不遮挡正文。手机改为紧凑目录，避免占满屏幕。
滚动吸附
Scroll Snap 滚动停止时自动吸附到最近的卡片位置，
1
2
3
4
适合用在：横滑卡片或作品列表
可以这样跟 AI 说
请给横向卡片列表加滚动吸附（Scroll Snap）：用户横滑后停止时，卡片自动对齐容器左侧，每次能看出下一张卡的边缘。保留触摸和键盘操作，不自动轮播。
横向滚动
Horizontal Scroll 竖向滚动驱动横向位移：向下滚动页面时，展示内容向左或向右移动。
1
2
3
适合用在：作品展示和横向叙事
可以这样跟 AI 说
请做竖向滚动驱动的横向展示（Horizontal Scroll）：进入作品区后固定展示窗口，向下滚动时卡片向左移动，最后一张展示完再恢复正常竖向滚动。手机改为可横滑列表，减少动效时显示普通列表。
阅读进度条
Scroll Progress 顶部细进度条随滚动增长，是文章与文档最常见的阅读进度指示。
适合用在：文章的阅读位置
可以这样跟 AI 说
请在文章顶部加阅读进度条（Scroll Progress）：按正文的滚动进度从 0% 填充到 100%，往回滚时回退。只计算文章正文，不包含页脚；用细条显示，不覆盖导航或文字。
路径绘制
SVG Line Draw 滚动带动 SVG 路径逐段绘制，常用于时间轴、流程图与签名。
适合用在：流程路线或连接线
可以这样跟 AI 说
请让流程图连接线随滚动逐步绘制（SVG Line Draw）：进入流程区后从起点画到终点，绘制进度绑定该区域的滚动进度，往回滚则收回。节点文字一直可读，减少动效时直接显示完整线条。
数字滚动
Count-up 元素滚入时数字从 0 滚动到目标值。
1280 ×
适合用在：指标和统计数据
可以这样跟 AI 说
请让统计数字随滚动递增（Count-up）：在统计区域滚动过程中从 0 增长到目标值，到末尾显示准确数值；往回滚则随进度回退。保留单位和小数精度，减少动效时直接显示最终值。
叙事滚动
Scrollytelling 左侧画面吸附固定，右侧文案逐屏划过，是数据故事最常用的叙事形式。
适合用在：产品介绍或分步骤讲解
可以这样跟 AI 说
请做滚动叙事（Scrollytelling）：桌面左侧固定一张示意图，右侧分步文字正常滚动；每步进入视口时更新左侧对应画面。只在这个章节固定，结束后释放；手机改为每步文字下方跟随对应图片。
滚动缩放
Zoom on Scroll 元素随滚动进度放大或缩小，类似产品页首屏的推近镜头。
适合用在：产品大图的缓慢推进
可以这样跟 AI 说
请给产品图片加滚动缩放（Zoom on Scroll）：图片经过视口时从 0.9 倍平滑放大到 1.1 倍，停止滚动就停止，往回滚则缩小。放大不影响周围布局，不裁掉关键内容，减少动效时保持原尺寸。
滚动倾斜
Skew on Scroll 根据滚动进度（或速度）给元素加斜切，营造动感的编辑风。
适合用在：轻微倾斜的展示卡片
可以这样跟 AI 说
请给展示卡片做滚动倾斜（Skew on Scroll）：随这段的滚动进度从轻微反向倾斜过渡到正向倾斜，往回滚时逆向变化。角度保持克制，不影响文字阅读；手机和减少动效模式关闭倾斜。
逐词高亮
Text Reveal 滚动时文案从左到右逐段点亮，把一句话徐徐揭示出来。
Scroll to reveal this sentence, word by word.
适合用在：重点句逐步高亮
可以这样跟 AI 说
请做滚动文字揭示（Text Reveal）：重点句先以较淡但仍可读的颜色展示，滚动经过时从左到右逐步高亮，进度跟随滚动，往回滚时还原。保留完整文字供阅读与搜索，减少动效时全部高亮。
头部收缩
Sticky Header Shrink 滚过阈值后吸顶导航栏收缩变矮，节省纵向空间。
适合用在：节省空间的固定页头
可以这样跟 AI 说
请做滚动收缩页头（Sticky Header Shrink）：页面顶部显示完整页头，下滚时平滑缩短高度并缩小 Logo，返回顶部时恢复。导航一直可用，正文不跳动；手机保留足够大的点击区域，减少动效时直接切换状态。
跑马灯
Marquee 无限跑马灯，位移随滚动变化，常用于 logo 墙、标签或新闻条。
ScrollParallaxStickySnapZoomRevealMarqueeScrollParallaxStickySnapZoomRevealMarquee
适合用在：标语或品牌名单
可以这样跟 AI 说
请做连续跑马灯（Marquee）：品牌词组按时间匀速横向循环，首尾无缝衔接，不需要用户滚动才开始。提供暂停按钮，内容保持可读；减少动效时显示静态名单。这个效果是自动移动，不是滚动进度动画。
整屏吸附
Full-page Snap 每次滚动吸附整整一屏，像翻页一样。
1
2
3
适合用在：分屏作品或章节展示
可以这样跟 AI 说
请做整屏滚动吸附（Full-page Snap）：每个展示章节占一屏，滚动停止时对齐最近章节，像分屏翻页。支持键盘操作；内容超过一屏或在手机上时改为自然滚动，不强行锁住页面。