jq - 强大的AOS页面滚动插件
1.最好用js控制动画过渡动画和延时，项目在发布时会有问题。
1、引用css和js文件，并配置：<script>AOS.init();script>2、通过使用data-aos-*属性调整行为，例如（对照下表）：<divdata-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;
}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！