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

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;
}