瓦尔登湖

无标签

发布日期: 2019-05-31

文章字数: 2.9k

阅读时长: 16 分

<!DOCTYPE HTML>

轻量级滚动动画JavaScript库aos.js | 闪烁之狐

闪烁之狐

首页

标签

分类

归档

关于

友情链接

闪烁之狐

从来没有真正的绝境，只有心灵的迷途

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

JavaScript

前端

发布日期:
2018-10-08

文章字数:
1.7k

阅读时长:
10 分

阅读次数:

一、简介

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

AOS

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

二、安装

1. Bower 安装

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

bower install aos –save

2. npm

你也能在 npm 上找到 aos：

npm install aos –save

3. Github 下载

Github 下载点击此处

三、使用示例

1. 使用方法

引入CSS样式文件：

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

添加JavaScript脚本文件：

<script src=“bower_components/aos/dist/aos.js“></script>

初始化载入AOS：

<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

转载请注明:

闪烁之狐

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

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

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

2018-10-09

软件工具

Linux

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

一、简介
lightgallery.js 是一个全功能、轻量级、无依赖的灯箱画廊显示库。

二、主要特性
全响应式兼容
模块化的架构和内置插件
移动设备和触摸支持
桌面设备拖拽支持
双击查看图像的实际大小
动画缩略图
社交媒体分享
You

2018-10-06

前端

JavaScript

博客搭建进阶

收集了一些搭建让博客变得更加华丽的法子。

2019-05-31 娱乐

博客

误解很大的一个历史人物——秦始皇

历史终究是含有大量的主观色彩，他们为了他们的观点而去证明。愈加的让我觉得自己活在一个虚假的世界。骂他暴君，可他在位37年却没有妄杀一位将军大臣；斥他严刑峻法，可他却制定了世界上最早保护人犯权利的法律；荆轲行刺，他怒火万丈，可秦军

2019-05-28 杂谈

转载历史风云人物