今天啊,做项目发现一个问题,那个网页的动态效果并不是js完成的,而是用了一个动画库,有点伤感,我没听说过该库。no!荣姐不是那麽轻易被困难打到的,于是荣姐与困难展开激烈厮杀!经过荣姐一番查找发现动画库真的算不上个事!
AOS动画库
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部的时候,元素能够回到前一个状态,如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。
链接:http://michalsnik.github.io/aos/
安装:如图所示![](/i/l/?n=22&i=blog/2969911/202210/2969911-20221020185842033-581347572.png)
使用方法
在页面中引入aos.css文件,jquery和aos.js文件
<link rel="stylesheet" href="dist/aos.css" /> <script src="js/jquery.min.js"></script> <script src="dist/aos.js"></script>
HTML结构
要使用aos动画库,你需要做的就是在需要动画的元素上添加aos属性,例如:
<div aos="animation_name">
aos脚本将会在页面滚动时,在该元素上触发相应的动画。在元素上还可以添加以下一些属性:
API
AOS对象有2个可用的方法:
-
init
-
refresh
AOS.refresh(); AOS.init();
注意以上代码AOS要大写
动画和锚位置
淡入淡出动画:
-
fade-up
-
fade-down
-
fade-left
-
fade-right
-
fade-up-right
-
fade-up-left
-
fade-down-right
-
fade-down-left
翻转动画:
-
flip-up
-
flip-down
-
flip-left
-
flip-right
滑动动画:
-
slide-up
-
slide-down
-
slide-left
-
slide-right
缩放动画:
-
zoom-in
-
zoom-in-up
-
zoom-in-down
-
zoom-in-left
-
zoom-in-right
-
zoom-out
-
zoom-out-up
-
zoom-out-down
-
zoom-out-left
-
zoom-out-right
锚位置
-
top-bottom
-
top-center
-
top-top
-
center-bottom
-
center-center
-
center-top
-
bottom-bottom
-
bottom-center
-
bottom-top
easing动画
你可以使用以下的一些easing动画效果:
-
linear
-
ease
-
ease-in
-
ease-out
-
ease-in-out
-
ease-in-back
-
ease-out-back
-
ease-in-out-back
-
ease-in-sine
-
ease-out-sine
-
ease-in-out-sine
-
ease-in-quad
-
ease-out-quad
-
ease-in-out-quad
-
ease-in-cubic
-
ease-out-cubic
-
ease-in-out-cubic
-
ease-in-quart
-
ease-out-quart
-
ease-in-out-quart
小小案例如下
标签:动画,ease,zoom,aos,fade,out From: https://www.cnblogs.com/meirongliu/p/16810995.html