JQuery插件 aos.js

飘逸的风3年前 (2022-09-17)前端838

简介:

aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。

使用方法:

在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="dist/aos.css" />
<script src="js/jquery.min.js"></script>
<script src="dist/aos.js"></script>


HTML结构:

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

<div aos="animation_name">


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

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


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


上面的代码将动画的持续时间修改为4000毫秒。

示例代码:

<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">


全局配置:

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

AOS.init({
   offset: 200,
   duration: 600,
   easing: 'ease-in-sine',
   delay: 100,
});


AOS提供了2个额外的配置方法,这些方法只能够在初始化时使用。

禁用AOS:


AOS.init({
   disable: 'mobile'
});


可以传入3种设备的类型:mobile、phone或tablet。

也可以设置自己的禁用条件,例如在屏幕小于1024像素时禁用AOS:


disable: window.innerWidth < 1024


或者传入一个函数,返回true或false。


disable: function () {
     var maxWidth = 1024;
     return window.innerWidth < maxWidth;
}


动画和锚位置:

动画:


aos.js 示例和下载:https://michalsnik.github.io/aos/

来源:http://t.zoukankan.com/slk-fight-p-6794461.html

相关文章

lhgCalendar 弹出日历组件

lhgCalendar 弹出日历组件

lhgCalendar是一个功能强大且兼容面广的对日历组件,它拥有精致的界面与友好的接口 精简迷你高效 弹出日历分独立版本和jQuery组件2个,独立版本大小才15K,jQuery版本才9K,...

jQuery 滚动鼠标中键图片自动改变大小(统一控制)

今天维护一个项目,需要对内容里的图片通过图片中间控制大小。由于是以前完成的,客户之前也没有提出要求,所以对已经添加后的数据没办法在一个个地在图片上加函数。网上查找了一下控制中键的资料,终于找到解决办法...

jquery 事件方法总结

Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"te...

jQuery自适应宽度导航插件Horizo​​ntalNav

jQuery自适应宽度导航插件Horizo​​ntalNav

Horizo​​ntalNav 是一个 jQuery 导航插件,能够自适应容器的宽度。如果你曾经在一个项目中创建过这种效果,你就会知道,这是很难处理的。但这个插件很容易,并且支持 IE6、IE7。...

jw player的快捷调用方法(附:jw player参数设定)

最近开发的项目需要调用一部分视频,找了很久,感觉有两个非常不错,一个是ckplayer(非常炫酷,网址:https://www.ckplayer.com/),感觉好奇的同学,可以访问他们的官网去看看;...

jQuery动态改变图片显示大小(完美兼容全部)

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。