Animation of Scroll 基于CSS3 animation,不支持低版本浏览器;
和基于Animation.css的收费库WOW.JS相似,但有自己的特色;
或者可百度一下AOS.JS去下载需要的资源库
手动添加需要引入
<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