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; }
上一篇: 产品经理自我介绍案例(产品经理面试攻略)
下一篇: 豫妃一生无子,乾隆为什么还那么宠爱她?