欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jq-强大的AOS页面滚动插件实例操作

程序员文章站 2022-08-04 16:27:39
jq - 强大的aos页面滚动插件 1、引用css和js文件,并配置: 2、通过使用data-aos-*属性调整行为,例如(对照下表): 3、也可以通过全局控制属性值,例如(对照下表...

jq - 强大的aos页面滚动插件

1、引用css和js文件,并配置:
	
2、通过使用data-aos-*属性调整行为,例如(对照下表):
3、也可以通过全局控制属性值,例如(对照下表): <script> aos.init({ offset: 200, duration: 600, easing: 'ease-in-sine', delay: 100, }); </script>
属性 描述 示例值 默认值
data-aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120
data-aos-duration 动画持续时间 600 400
data-aos-easing 动画的easing动画效果 ease-in-sine ease
data-aos-delay 动画的延迟时间 300 0
data-aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null
data-aos-anchor-placement 锚位置,触发动画时元素位于屏幕的位置 top-center top-bottom
data-aos-once 动画是否只会触发一次,或者每次上下滚动都会触发 true false

下载:点这里
github: 点这里
效果: 点这里


禁用aos

如果想在小屏幕设备中禁用aos,可以:

// 实用
aos.init({
  disable: 'mobile'
});

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

disable: window.innerwidth < 1024

也可以传入一个函数,返回true 或 false

disable: function () {
    var maxwidth = 1024;
    return window.innerwidth < maxwidth;
}