aos.js和wow.js的区别,aos.js页面滚动动画脚本的使用方法

平时我们帮客户做的网站都是没有动画效果的,如果能在页面滚动时,对页面元素添加一些动画效果,不管是PC站还是手机站,平时普通的网站在加入动画后能瞬间给人一种高大上的感觉

网上查了下提供这方面服务的插件,有aos.js和wow.js,2者效果是差不多的,区别是aos.js能在页面回滚的时候,元素能回到之前的状态,这样可以实现循环动画效果,看读者更喜欢哪种了,作者更喜欢那种一直带动画效果的,更炫,所以这里着重说下aos.js的使用方法

1、下载地址: Aos.js下载地址

2、基本使用方法,引入脚本、样式表、然后初始化即可

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="text/javascript">
   AOS.init({ easing: 'ease-out-back', duration: 1000 });
</script>

3、然后在需要添加动画的地方,添加上动画即可

<div data-aos="fade-down"></div>

4、更详细的使用方法,可以参考这2篇文章
文章1:AOS – 另外一个独特的页面滚动动画库(CSS3)
文章2:官方文档,在滚动库上制作动画

5、效果演示:AOS.js页面滚动动画库CSS3演示效果

相关推荐