|
aos.js（Animate on scroll）是一个轻量的jQuery动画库插件，可以简单的帮我们实现页面滚动触发动画效果，在页面往回滚动时，元素又会恢复到原来的状态，可以使网页更加生动。
以如下网页为例介绍其使用办法
一、安装
安装
bower
bower install aos --save
npm
npm install aos --save
yarn
yarn add aos
直接引入
css
js
二、使用（以vue为例）
引入
import AOS from 'aos'
import 'aos/dist/aos.css'
初始化
AOS.init();
三、使用方法
在需要动画的属性上添加aos属性，html结构如下：
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()中使用
配置描述示例值默认值disableAOS被禁用的条件mobilefalsestartEventAOS被初始化的事件名称exampleEventDOMContentLoaded
禁用aos
AOS.init({
disable: 'mobile' //禁止在小屏幕设备中使用
});
AOS.init({
disable: window.innerWidth < 1024//屏幕尺寸小于1024禁用
});
初始化事件
AOS.init({
startEvent: 'myFun'
});
aos中还提供了两个api
init()
refresh()
四、实际应用
以下代码简单实现开头网站所示效果
aosDemo
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;
}
USA Today is an internationally
distributed American daily
middle-market newspaper. It is
printed at 37 sites across the United
States and at five additional sites
internationally
U
S
A
;
T
O
D
A
Y
Being one of the top largest and influential newspapers of the world it has a sophisticated high-quality website design with numerous intricate layouts, myriads of sections and thousands of informative pages.
-;01
-;02
-;03
tab1
tab2
tab3
tab4
AOS.init();
|