AOS 演示 · Scroll Reveal 滚动进入全量特效
滚动到哪里、元素出现在哪里 —— fade / flip / slide / zoom 等预设动画，几乎零 JS 即可实现。开源免费，Landing Page 首选。
效果选择器 · 不滚动也能对比
点击下方按钮，实时切换演示卡片的 data-aos 类型，并附加当前 duration / delay / easing 参数后重新触发动画。
fade-up
当前动画类型，点击下方按钮切换
data-aos-once · data-aos-anchor-placement
左侧卡片设置 data-aos-once="true"（只触发一次，滚回去再滚回来不会重播）；右侧卡片用 data-aos-anchor-placement="center-bottom" 演示锚点触发位置——动画在元素中心到达视口底部时才开始，而非默认的元素顶部进入视口。
data-aos-once="true"
只播放一次；再次滚动经过不会重复触发。
anchor-placement: center-bottom
当元素中心抵达视口底部时才触发，而非元素顶部进入视口。
向下滚动，逐一查看 AOS 全部动画分类
Fade 淡入
9 个方向变体，元素从指定方向淡入到位
fade
原地淡入，无方向位移
fade-up
delay 0ms
fade-down
delay 100ms
fade-left
delay 200ms
fade-right
delay 300ms
fade-up-right
右上方向
fade-up-left
左上方向
fade-down-right
右下方向
fade-down-left
左下方向
Flip 翻转
沿 X / Y 轴 3D 翻转进入，模拟卡片翻面
flip-up
duration 600ms
flip-down
duration 800ms
flip-left
duration 1000ms
flip-right
duration 1200ms
Slide 平移
元素从视口外整体滑入，位移幅度大于 fade
slide-up
从下方滑入
slide-down
从上方滑入
slide-left
从右侧滑入
slide-right
从左侧滑入
Zoom 缩放
zoom-in 由小变大，zoom-out 由大变小，各自 5 个方向变体
zoom-in
原地放大淡入
zoom-in-up
从下方放大
zoom-in-down
从上方放大
zoom-in-left
从右侧放大
zoom-in-right
从左侧放大
zoom-out
原地缩小淡入
zoom-out-up
缩小并向下移出
zoom-out-down
缩小并向上移出
zoom-out-left
缩小并向右移出
zoom-out-right
缩小并向左移出
Easing 缓动函数对比
同一 fade-up，duration 统一 900ms，仅 easing 不同
linear
匀速
ease-in-back
先回拉再进入
ease-out-back
越过终点再回弹
ease-in-out-sine
正弦平滑
Anchor Placement 触发锚点
控制"元素的哪个位置"到达"视口的哪个位置"时触发动画
data-aos-once 单次触发
下方卡片仅播放一次动画，向上滚回再滚下来不会重播；对照组每次经过都会重播
once = true
只播放一次
once = false（默认）
每次经过都重播