文章详情 - 宏推科技

aos.js（Animate on scroll）是一个轻量的jQuery动画库插件，可以简单的帮我们实现页面滚动触发动画效果，在页面往回滚动时，元素又会恢复到原来的状态，可以使网页更加生动。

以如下网页为例介绍其使用办法

New Image

一、安装

安装 bower


js
复制代码
bower install aos --save

npm


js
复制代码
npm install aos --save

yarn


js
复制代码
yarn add aos

直接引入 css


css
复制代码
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">


js
复制代码
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

二、使用（以vue为例）

引入


js
复制代码
import AOS from ''aos''
import ''aos/dist/aos.css''

初始化


js
复制代码
AOS.init();

三、使用方法

在需要动画的属性上添加aos属性，html结构如下：


html
复制代码
<div data-aos="fade-up" data-aos-duration="800"></div>

aos： 动画名称，动画名称及效果可见官网
aos-offset： 立刻触发动画还是在指定时间之后触发动画（默认120）
aos-duration： 动画持续时间（默认400）
aos-easing： 动画的easing动画效果（默认ease），详细见下方
aos-delay： 动画延迟时间（默认0）
aos-anchor： #selector 锚元素。使用它的偏移来取代实际元素的偏移来触发动画（默认null）
aos-anchor-placement： 锚位置，触发动画时元素位于屏幕的位置（默认top-bottom）
aos-once： 动画是否只会触发一次，或者每次上下滚动都会触发（默认false）

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

三、额外配置项

aos提供了两个额外配置项，只能在初始化init()中使用

配置	描述	示例值	默认值
disable	AOS被禁用的条件	mobile	false
startEvent	AOS被初始化的事件名称	exampleEvent	DOMContentLoaded

禁用aos


js
复制代码
AOS.init({   
    disable: ''mobile'' //禁止在小屏幕设备中使用
});
AOS.init({   
    disable: window.innerWidth < 1024//屏幕尺寸小于1024禁用
});

初始化事件


js
复制代码
AOS.init({
  startEvent: ''myFun''
});

aos中还提供了两个api

init()
refresh()

四、实际应用

New Image 以下代码简单实现开头网站所示效果


html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>aosDemo</title>
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<style type="text/css">
		html,body{
			margin:0;
			padding:0;
			overflow-x: hidden;
			color:white;
		}
		.flex-cc{
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.content0{
			width:100vw;
			height:80vh;
			background: #010101;
		}
		.content1{
			width:100vw;
			height:100vh;
			background: #010101;
			padding-left: 300px;
		}
		.content2{
			width:100vw;
			height:80vh;
			background: #010101;
			padding-left: 300px;
		}
		.content3{
			width:100vw;
			height:80vh;
			background: #010101;
			writing-mode:vertical-lr;
			font-size: 32px;
			font-weight: 300;
			position: relative;
		}
		.content4{
			width:100vw;
			height:100vh;
			background: #010101;
		}
		.text1{
			font-size: 32px;
			text-align: left;
		}
		.text2{
			font-size: 48px;
			display: flex;
			letter-spacing: 8px;
		}
		.text3{
			font-size: 20px;
			margin-top:32px;
			font-weight: 300;
		}
		.tab1{
			position: absolute;
			top:150px;
			left:20px;
		}
		.tab2{
			position: absolute;
		    bottom:150px;
			left:20px;
		}
		.tab3{
			position: absolute;
			top:150px;
			right:40px;
		}
	    .tab4{
			position: absolute;
			bottom:150px;
			right:40px;
		}
		ul{
			display: flex;
			flex-direction: row;
			padding:0px;
			margin-top:40px;

		}
		li{
			list-style: none;
			width:200px;
			height:150px;
			border:1px solid #92e2f2;
			position: relative;
		}
		li:not(:last-child){
			margin-right:80px;
		}
		li div{
			position: absolute;
			top:20px;
			right:-40px;
			font-size: 32px;
		}

	</style>
</head>
<body>
	<div class="content0">
		
	</div>
	<div class="content1 flex-cc">
		<div class="text1" data-aos="fade-up" data-aos-duration="600">USA Today is an internationally</div>
		<div class="text1" data-aos="fade-up" data-aos-duration="600" data-aos-delay="50">distributed American daily</div>
		<div class="text1" data-aos="fade-up" data-aos-duration="600" data-aos-delay="100">middle-market newspaper. It is</div>
		<div class="text1" data-aos="fade-up" data-aos-duration="600" data-aos-delay="150">printed at 37 sites across the United</div>
		<div class="text1" data-aos="fade-up" data-aos-duration="600" data-aos-delay="200">States and at five additional sites</div>
		<div class="text1" data-aos="fade-up" data-aos-duration="600" data-aos-delay="250">internationally</div>
	</div>
	<div class="content2 flex-cc">
		<div class="text2">
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back">U</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="100">S</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="200">A</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="300">&nbsp;</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="400">T</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="500">O</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="600">D</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="700">A</div>
			<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="600" data-aos-easing="ease-out-back" data-aos-delay="800">Y</div>
		</div>
		<div class="text3" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="1000" data-aos-easing="ease-out-back" data-aos-delay="1000">
			Being one of the top largest and influential newspapers of the</br> world it has a sophisticated high-quality website design with</br> numerous intricate layouts, myriads of</br> sections and thousands of informative pages.
		</div>
		<ul>
			<li>
				<div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="1000" data-aos-easing="ease-out-back" data-aos-delay="1200">-&nbsp;01</div>
			</li>
			<li><div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="1000" data-aos-easing="ease-out-back" data-aos-delay="1400">-&nbsp;02</div></li>
			<li><div data-aos="fade-up" data-aos-anchor-placement="bottom-bottom" data-aos-duration="1000" data-aos-easing="ease-out-back" data-aos-delay="1600">-&nbsp;03</div></li>
		</ul>
	</div>
	<div class="content3">
		<div class="tab1" data-aos="fade-right" data-aos-duration="800">tab1</div>
		<div class="tab2" data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">tab2</div>
		<div class="tab3" data-aos="fade-left" data-aos-duration="800">tab3</div>
		<div class="tab4" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">tab4</div>
	</div>
	<div class="content4"></div>
</body>
<script type="text/javascript">
	 AOS.init();
</script>
</html>