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

JavaScript

前端开发

发布日期: 2018-10-08

文章字数: 2k

阅读时长: 12 分

阅读次数:

一、简介

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. 简单示例

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%;
    }
}

<!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. 异步示例

<!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

blinkfox

https://winstonsky.github.io/2018/10/08/qian-duan-kai-fa/javascript/qing-liang-ji-gun-dong-dong-hua-javascript-ku-aos.js/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 blinkfox !

JavaScript

常用Bash命令整理之查看文件和目录

1. ls - 列出文件名和目录ls命令是Linux中最常用的命令之一，其作用就是列出文件名和目录。在命令行提示符下，直接输入ls命令，不带任何选项，将列出当前目录下所有文件和目录，但不会显示详细的信息，比如，文件类型、大小、修改日期和时间

2018-10-09 开发工具

Linux 教程

全功能JavaScript灯箱画廊插件lightgallery.js

一、简介 lightgallery.js 是一个全功能、轻量级、无依赖的灯箱画廊显示库。二、主要特性全响应式兼容模块化的架构和内置插件移动设备和触摸支持桌面设备拖拽支持双击查看图像的实际大小动画缩略图社交媒体分享 You

2018-10-06 前端开发

JavaScript

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

一、简介

二、安装

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 函数

你的赏识就是我前进的动力