源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1565|回复: 0

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

[复制链接]

3095

主题

3493

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
266463
发表于 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

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-14 04:03 , Processed in 0.025640 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明