# 结合滚动触发动画
URL: https://caijiao.org/animejs/6-integration/3-scroll
Source: docs/animejs/6-integration/3-scroll.md
Description: 本节讲解如何结合滚动事件触发 Anime.js 动画，实现页面滚动中组件进场、浮现等动效，提升用户视觉体验。
在实际页面中，滚动加载是常见的交互模式。我们可以通过监听 `scroll` 事件，当元素进入视口时使用 Anime.js 播放动画，实现渐入、浮现、滑动等效果。
## 示例：元素进入视口后淡入浮现
```html
滚动触发动画
````
## 小结
通过 scroll + Anime.js，你可以实现按需播放动画，避免资源浪费，同时提升首屏加载体验和页面动态感。
✅ 效果说明：
* 页面初始加载时 `.fade-in` 元素不可见；
* 滚动到该元素区域后触发动画：浮现 + 上移；
* 动画只触发一次，避免重复执行；
* 适合用于列表加载、区块滚动浮现等动态场景。