沉浸式阅读
Beta
原创

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

     订阅 JavaScript教程     2023-05-30     739    0    0    0    2023-05-30
学习要点:aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。

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


本文标题: aos.js好看的动画交互效果

本文链接: https://www.mbkfw.com/course/1196.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
本文标签: #aos #动画
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈