您好!欢迎来到大秦朝旭资源站
安全运营5

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

分类:升级补丁 时间:2023-06-26 13:51 浏览:363
概述
Animation of Scroll 基于CSS3 animation,不支持低版本浏览器;和基于Animation.css的收费库WOW.JS相似,但有自己的特色;npm官网 aos.js或者可百度一下AOS.JS去下载需要的资源库AOS动画显示效果手动添加需要引入<link rel='stylesheet' href='aos.css'><script 
内容

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


评论
资讯正文页右侧广告
联系我们
Q Q:1005618718
电话:17792038992
邮箱:1005618718@qq.com
时间:09:00 - 24:00
联系我们