aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。
加载方法:
<link rel="stylesheet" href="/dist/aos.css" /> <script src="/dist/aos.js"></script> <script> AOS.init(); </script>
(JS、CSS文件加载路径自己调配,每个人情况不同。)
元素上可以添加以下属性:(这里以DIV为例)
属性 | 描述 | 示例值 | 默认值 |
data-aos-offset | 是立刻触发动画还是在指定时间之后触发动画 | 200 | 120 |
data-aos-duration | 动画持续时间 | 600 | 400 |
data-aos-easing | 动画的easing动画效 |