aos.js好看的动画交互效果

Animation of Scroll 基于CSS3 animation，不支持低版本浏览器；

和基于Animation.css的收费库WOW.JS相似，但有自己的特色；

npm官网 aos.js

或者可百度一下AOS.JS去下载需要的资源库

AOS动画显示效果

手动添加需要引入

<link rel='stylesheet' href='aos.css'>
<script src='aos.js'></script>
<script>
    AOS.init();
</script>

如果你不想单独每个元素做一个动画配置，你可以通过init()方法来统一配置所有元素的动画效果。

AOS.init({
    offset:-120,//px，提前或延迟触发，负数提前触发
    duration:400,//ms，过渡时间，50-3000
    easing:ease,//时间曲线
    delay:0,//s，延迟执行
    anchor:null，//body，指定元素触发，Element
    anchor-placement:top-bottom,//top向bottom滚动，top和bottom触发，top|center|bottom任意二个组合，分先后方向，可重复如center-center
    once:false//是否仅触发一次
})

注意，aos-duration的动画持续时间的范围从50-3000毫秒，如果你想设置更大的值，可以在页面中添加下面的CSS代码：

body[data-aos-duration='5000'] [data-aos], [data-aos][data-aos][data-aos-duration='5000']{
    transition-duration: 5000ms;
}

注意：两[data-aos]的写法，提高优先级，不必!important；

要使用aos动画库，你需要做的就是在需要动画的元素上添加aos属性，例如：

<div data-aos="animation_name">

注意：默认配置项，前加data-aos-，作用到元素

如果需要指定某个效果

<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600">
<div aos="flip-left" aos-delay="100" aos-anchor=".example-selector">
<div aos="fade-up" aos-anchor-placement="top-center">

如果你担心HTML5校验的问题，可以为上面的属性添加data-前缀。

<div data-aos="animation_name" data-aos-offset="200" data-aos-easing="ease-in-sine">

aos脚本将会在页面滚动时，在该元素上触发相应的动画。

在元素上还可以添加以下一些属性：

属性    属性    属性    默认值    

aos-offset    是立刻触发动画还是在指定时间之后触发动画    200    120    

aos-duration    动画持续时间    600    400    

aos-easing    动画的easing动画效果    ease-in-sine    ease    

aos-delay    动画的延迟时间    300    0    

aos-anchor    锚元素。使用它的偏移来取代实际元素的偏移来触发动画    #selector    null    

aos-anchor-placement    锚位置，触发动画时元素位于屏幕的位置    top-center    top-bottom    

aos-once    动画是否只会触发一次，或者每次上下滚动都会触发    true    false

   

禁用写法

AOS.init({
    disable:false,//禁用，false|mobile|phone|tablet
    //或者，自定义规则
    disable:window.innerWidth > 400
    //或者，传入函数，return false|true
    disable:function(){
        returen window.innerWidth > 400
    }
})

如果你不想滚动动画从页面加载（DOMContentLoaded）后就开始执行，可以使用startEvent来设置自己的事件，AOS会在document上监听这个事件：

AOS.init({
  startEvent: 'someCoolEvent'
});

动画列表：data-aos:

1.fade类（淡入淡出动画）：fade、fade-up、fade-down、fade-left、fade-right、fade-up-left、fade-up-right、fade-down-left、fade-down-right

2.flip类（翻转动画）：flip-up、flip-down、flip-left、flip-right

3.slide类（滑动动画）：slide-up、slide-down、slide-left、slide-right

4.zoom类（缩放动画）：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

你可以使用以下的一些easing动画效果

时间曲线：data-aos-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