jq强大的AOS页面滚动插件

洪七公 · 发表于 2023-6-3 12:57:00

高端的网站界面，在展示页面的时候是不是经常看到div从左从右或者从上从下慢慢过渡加载出来，这个效果非常不错，尤其是一些企业站特别喜欢，今天我们给出示例解析并且代码打包给大家！

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>

具体代码可以下载打包代码回家慢慢看！

github下载：https://github.com/michalsnik/aos

		自动登录	找回密码
密码			会员注册

[JavaScript] jq强大的AOS页面滚动插件

浏览过的版块