AOS 2.3.4 滚动动画库示例 - Bootstrap组件实验室

官方对照官方没有

Bootstrap 官方组件库不含「滚动入场动画」能力（官方仅有 Scrollspy 高亮、Collapse/Modal 等交互），需要元素随滚动淡入上滑时，AOS 是最常用的轻量补充。

对比维度	Bootstrap 官方	AOS 2.3.4
能力定位	组件交互框架，无入场动效组件	专用滚动入场动画库，data 属性声明式配置
核心特性	Scrollspy 监听、Collapse / Modal / Offcanvas 切换	fade-up/right/left、zoom、flip 等方向动画，支持时长、延迟、偏移、循环
依赖与体积	自带 bundle，一次引入全站可用	aos.css + aos.js 两个文件约 14KB，零依赖
适用场景	导航、弹层、折叠等交互组件	长页面各区块、卡片、图文进入视口时的淡入上滑
注意事项	—	动画元素初始为透明态，截图工具强制显示终态属正常现象

说明

本小节为对照说明，无示例代码。

引入方式

通过 jsDelivr 固定 aos@2.3.4：CSS 放 <head>，JS 放 body 末尾；引入后调用一次 AOS.init() 即可生效。不依赖 jQuery。

HTML 引入 + 初始化

<!-- head 中引入样式 -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

<!-- body 末尾引入脚本并初始化 -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
  AOS.init();
</script>

<!-- 任意元素加上 data-aos 即生效 -->
<div data-aos="fade-up">滚动到这里时淡入上滑</div>

基础示例

元素声明 data-aos 后，滚动进入视口即播放一次入场动画。刷新或向下滚动页面再回看，可观察到卡片依次淡入。

data-aos="fade-up"

淡入上滑卡片 —— 最常用的入场方式，内容区块向下滚动时从下方淡入。

data-aos="fade-right"

从右滑入卡片 —— 适合图文混排中从侧向滑入的视觉节奏。

data-aos="zoom-in"

缩放进入卡片 —— 由小放大渐显，适合突出重点模块。

HTML + JS 示例

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

<div data-aos="fade-up">淡入上滑</div>
<div data-aos="fade-right">从右滑入</div>
<div data-aos="zoom-in">缩放进入</div>

<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
  AOS.init();   // 页面加载后初始化一次
</script>

动画方向与时长

data-aos-duration 控制动画时长（毫秒，默认 400）；常用方向还有 fade-left、fade-down、zoom-out、flip-up 等。

data-aos="fade-left" data-aos-duration="1500"

从左缓慢滑入，时长 1500ms（默认 400ms）。

data-aos="fade-down" data-aos-duration="800"

自顶部落入，时长 800ms。

data-aos="zoom-out" data-aos-duration="1000"

由大缩小渐显，时长 1000ms。

HTML 示例

<div data-aos="fade-left"  data-aos-duration="1500">从左缓慢滑入</div>
<div data-aos="fade-down"  data-aos-duration="800">自顶部落入</div>
<div data-aos="zoom-out"   data-aos-duration="1000">由大缩小渐显</div>

锚点延迟与触发偏移

data-aos-delay 在触发后等待若干毫秒再播放，适合同组元素依次入场；data-aos-offset 调整「距离视口多少像素时触发」，可让动画更早或更晚开始。

data-aos-delay="0"

第一块：立即入场。

data-aos-delay="300"

第二块：延迟 300ms，形成依次入场的节奏。

data-aos-delay="600" data-aos-offset="100"

第三块：延迟 600ms，且距离视口 100px 即触发。