给正在和 AI 一起做网页的人 ✳那个效果，
那个效果，
原来叫这个！
先看它怎么动，再知道它叫什么。把准确的描述和验收标准复制给 AI，让网页更接近你脑海里的样子。
开始找灵感 ↘120个动效与交互术语
分成 12 个细分选项
分成 12 个细分选项
THE LIVING INDEX / 01翻翻这本
翻翻这本
会动的词典。
每张卡片都是一个正在发生的小示例。
用自己的话找效果
试着描述触发时机、运动方向、速度或用户操作。
01先选效果大类
02再选具体选项
ALL THE LITTLE MOTIONS
120 个效果 · 点击卡片看完整说明 ↗从这里开始逛逛
LIVE PREVIEW ✦ MOTIONLEX
滚动触发与定位NO. 001
滚动显现Scroll Reveal
内容进入视野，逐项浮现。
↗LIVE PREVIEW
背景慢 · 前景快
✦ MOTIONLEX滚动触发与定位NO. 002
视差滚动Parallax
前景与背景以不同速度移动。
↗LIVE PREVIEW
目录 · 停在顶部
✦ MOTIONLEX正文第一段正文第二段正文第三段
↓ 内容继续移动滚动触发与定位NO. 003
吸顶定位Sticky Positioning
标签停在原位，内容继续走。
↗LIVE PREVIEW
文章阅读进度
✦ MOTIONLEX0% → 100%
滚动触发与定位NO. 004
阅读进度条Scroll Progress
细线随着阅读向前推进。
↗LIVE PREVIEW
固定画面 ✳01 / 开始02 / 展开03 / 结束
✦ MOTIONLEX滚动触发与定位NO. 005
固定叙事区Pinned Story
画面留在原位，故事随滚动换幕。
↗LIVE PREVIEW ✦ MOTIONLEX
SCROLL
⇄SCENE✳
滚动触发与定位NO. 006
滚动驱动动画Scroll-linked Animation
滚多少，画面就变化多少。
↗LIVE PREVIEW
向下滚动 ↓
✦ MOTIONLEX010203
内容横向移动 →滚动触发与定位NO. 007
横向滚动段落Horizontal Scroll Section
往下滑时，内容向旁边走。
↗LIVE PREVIEW
慢慢滑 ↓小幅移动快速滑 ⇣更快移动
✦ MOTIONLEX滚动触发与定位NO. 008
滚动速度响应Scroll Velocity Response
滑得快，元素反应也更快。
↗LIVE PREVIEW ✦ MOTIONLEX
☰ NAVIGATION
↓ SCROLL DOWN↑ SCROLL UP滚动触发与定位NO. 009
滚动方向响应Scroll Direction Response
向下收起，向上再次出现。
↗LIVE PREVIEW
VIEWPORT
✦ MOTIONLEX35%
✳ reveal!滚动触发与定位NO. 010
视口阈值触发Viewport Threshold
看见一定比例后才开始动。
↗LIVE PREVIEW
010203停在最近一屏 ↓
✦ MOTIONLEX滚动浏览与导航NO. 011
滚动吸附Scroll Snap
滑动结束后停在下一张卡片。
↗LIVE PREVIEW
接近列表底部 ↓01 · 内容02 · 内容03 · 新内容自动接上下一批
✦ MOTIONLEX滚动浏览与导航NO. 012
无限加载Infinite Scroll
快看完时自动接上下一批。
↗说出来 · 看明白 · 做出来 ✳
01说出想法
打字或语音，说出你想要的画面。
02看动态
从候选卡片里看真实示意，确认是不是你想要的效果。
03复制给 AI
点开术语，把实现要求和验收要点一起发给 AI，再按真实页面检查。