平时我们帮客户做的网站都是没有动画效果的,如果能在页面滚动时,对页面元素添加一些动画效果,不管是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演示效果