热门关键字:
jquery > jquery教程 > jquery教程 > JQuery插件 aos.js

JQuery插件 aos.js

217
作者:管理员
发布时间:2021/1/15 15:33:50
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3156

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


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


  HTML结构:


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


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


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


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


  示例代码:


  全局配置:


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


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


  禁用AOS:


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


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


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


  动画和锚位置:


  动画:


  JQuery插件 aos.js


 




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:插件 aos.js
友荐云推荐