轻量级滚动动画JavaScript库aos.js

JavaScript
前端开发
发布日期:  2018-10-08
文章字数:  9637
阅读时长:  32 分

一、简介

aos.js是一款效果超赞的页面滚动的 JavaScript 动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。

AOS

注：从2.0.0版本之后,只支持使用data-aos属性，不再支持使用aos属性。

二、安装

1. Bower 安装

你可以使用 Bower 包管理工具安装aos：

1
bower install aos --save

2. npm

你也能在 npm 上找到 aos：

1
npm install aos --save

3. Github 下载

Github 下载点击此处

三、使用示例

1. 使用方法

引入CSS样式文件：

1
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />

添加JavaScript脚本文件：

1
<script src="bower_components/aos/dist/aos.js"></script>

初始化载入AOS：

1
2
3
<script>
    AOS.init();
</script>

2. 简单示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body {
    font-family: Helvetica,Tahoma;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

.aos-all {
    width: 1000px;
    max-width: 98%;
    margin: 10vh auto 0 auto;
}

.aos-item {
    display: inline-block;
    float: left;
    width: 33.3333%;
    height: 300px;
    padding: 20px;
}

.aos-item__inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1da4e2;
    line-height: 260px;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 800px) {
    .aos-item {
        width: 50%;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AOS的简单示例</title>
    <meta name="viewport" content="width=device-width">
    <link type="text/css" rel="stylesheet" href="aos/aos.css" />
    <link type="text/css" rel="stylesheet" href="aos_test.css" />
</head>
<body onload="initLoad();">

    <div id="transcroller" class="aos-all">
        <div class="aos-item" data-aos="fade-up">
            <div class="aos-item__inner"><h3>1</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-down">
            <div class="aos-item__inner"><h3>2</h3></div>
        </div>
        <div class="aos-item" data-aos="zoom-out-down">
            <div class="aos-item__inner"><h3>3</h3></div>
        </div>
        <div class="aos-item" data-aos="flip-down">
            <div class="aos-item__inner"><h3>4</h3></div>
        </div>
        <div class="aos-item" data-aos="flip-up">
            <div class="aos-item__inner"><h3>5</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-down">
            <div class="aos-item__inner"><h3>6</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>7</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-down">
            <div class="aos-item__inner"><h3>8</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>9</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-down">
            <div class="aos-item__inner"><h3>10</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-up">
            <div class="aos-item__inner"><h3>11</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-down">
            <div class="aos-item__inner"><h3>12</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>13</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-up">
            <div class="aos-item__inner"><h3>14</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>15</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-up">
            <div class="aos-item__inner"><h3>16</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-down">
            <div class="aos-item__inner"><h3>17</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-up">
            <div class="aos-item__inner"><h3>18</h3></div>
        </div>
        <div class="aos-item" data-aos="zoom-out">
            <div class="aos-item__inner"><h3>19</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-up">
            <div class="aos-item__inner"><h3>20</h3></div>
        </div>
        <div class="aos-item" data-aos="zoom-out">
            <div class="aos-item__inner"><h3>21</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>22</h3></div>
        </div>
        <div class="aos-item" data-aos="zoom-out-up">
            <div class="aos-item__inner"><h3>23</h3></div>
        </div>
        <div class="aos-item" data-aos="zoom-out-down">
            <div class="aos-item__inner"><h3>24</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>25</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>26</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>27</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>28</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>29</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>30</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>31</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>32</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>33</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>34</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>35</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>36</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>37</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>38</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>39</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>40</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>41</h3></div>
        </div>
        <div class="aos-item" data-aos="fade-in">
            <div class="aos-item__inner"><h3>42</h3></div>
        </div>
    </div>

<script type="text/javascript" src="aos/aos.js"></script>
<script type="text/javascript">
    function initLoad() {
        AOS.init();
    }
</script>
</body>
</html>

3. 异步示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AOS 异步使用的示例</title>
    <meta name="viewport" content="width=device-width">
    <link type="text/css" rel="stylesheet" href="aos.css" />
    <link type="text/css" rel="stylesheet" href="aos_test.css" />
</head>
<body onload="initLoad();">

    <div id="aos_async" class="aos-all"></div>

<script type="text/javascript" src="aos.js"></script>
<script type="text/javascript">
    function initLoad() {
        AOS.init();
    }

    // 0.5秒执行一次
    setInterval(addItem, 500);

    var itemsCounter = 1;
    var container = document.getElementById('aos_async');

    /**
     * 动态生成的div元素
     */
    function addItem () {
        if (itemsCounter > 42) return;
        var item = document.createElement('div');
        item.classList.add('aos-item');
        item.setAttribute('data-aos', 'fade-up');
        item.innerHTML = '<div class="aos-item__inner"><h3>' + itemsCounter + '</h3></div>';
        container.appendChild(item);
        itemsCounter++;
    }
</script>
</body>
</html>

四、动画样式

以下是AOS已经提供了的多种动画：

1. Fade animations

  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

2. Flip animations

  • flip-up
  • flip-down
  • flip-left
  • flip-right

3. Slide animations

  • slide-up
  • slide-down
  • slide-left
  • slide-right

4. Zoom animations

  • 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

5. Anchor placement

  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top

五、Easing 函数

你可以选择以下任意一个时间函数来做出很好的做动画元素：

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart
        </div>
        <hr/>

        

<div class="reprint" id="reprint-statement">
    
        <div class="reprint__author">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-user">
                    文章作者:
                </i>
            </span>
            <span class="reprint-info">
                <a href="/" rel="external nofollow noreferrer">blinkfox</a>
            </span>
        </div>
        <div class="reprint__type">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-link">
                    文章链接:
                </i>
            </span>
            <span class="reprint-info">
                <a href="/posts/2018/10/08/qian-duan-kai-fa/javascript/qing-liang-ji-gun-dong-dong-hua-javascript-ku-aos.js/">/posts/2018/10/08/qian-duan-kai-fa/javascript/qing-liang-ji-gun-dong-dong-hua-javascript-ku-aos.js/</a>
            </span>
        </div>
        <div class="reprint__notice">
            <span class="reprint-meta" style="font-weight: bold;">
                <i class="fas fa-copyright">
                    版权声明:
                </i>
            </span>
            <span class="reprint-info">
                本博客所有文章除特別声明外，均采用
                <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                许可协议。转载请注明来源
                <a href="/" target="_blank">blinkfox</a>
                !
            </span>
        </div>
    
</div>

<script async defer>
  document.addEventListener("copy", function (e) {
    let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
    M.toast({html: toastHTML})
  });

  function navToReprintStatement() {
    $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
  }
</script>
本文链接:   /posts/2018/10/08/qing-liang-ji-gun-dong-dong-hua-javascript-ku-aos.js/
  目录