前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >轻量级滚动动画JavaScript库aos.js

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

作者头像
Abalone
发布2022-07-14 14:16:28
1.8K0
发布2022-07-14 14:16:28
举报
文章被收录于专栏:影像技术栈影像技术栈

一、简介

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

AOS
AOS

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

二、安装

1. Bower 安装

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

代码语言:javascript
复制
bower install aos --save

2. npm

你也能在 npm 上找到 aos

代码语言:javascript
复制
npm install aos --save

3. Github 下载

Github 下载点击此处

三、使用示例

1. 使用方法

引入CSS样式文件:

代码语言:javascript
复制
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />

添加JavaScript脚本文件:

代码语言:javascript
复制
<script src="bower_components/aos/dist/aos.js"></script>

初始化载入AOS

代码语言:javascript
复制
<script>
    AOS.init();
</script>

2. 简单示例

代码语言:javascript
复制
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%;
    }
}
代码语言:javascript
复制
<!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. 异步示例

代码语言:javascript
复制
<!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
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-10-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、简介
  • 二、安装
    • 1. Bower 安装
      • 2. npm
        • 3. Github 下载
        • 三、使用示例
          • 1. 使用方法
            • 2. 简单示例
              • 3. 异步示例
              • 四、动画样式
                • 1. Fade animations
                  • 2. Flip animations
                    • 3. Slide animations
                      • 4. Zoom animations
                        • 5. Anchor placement
                        • 五、Easing 函数
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档