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

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/82874802

1、引用css和js文件，并配置：
	<script>
	  AOS.init();
	</script>

2、通过使用data-aos-*属性调整行为，例如（对照下表）：
	
<div
    data-aos="fade-up"
   		data-aos-offset="200"
    			data-aos-delay="50"
   					 data-aos-duration="1000"
    						data-aos-easing="ease-in-out"
    				data-aos-mirror="true"
    		data-aos-once="false"
   	 data-aos-anchor-placement="top-center"
  >
  </div>
  
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;
}