Welcome, Old Sport!

aos.js轻量级页面元素滚动动画插件

by ilikecss ON 2016/09/22 1068

aos.js轻量级页面元素滚动动画插件效果类似于wow.js,不过相对更轻量级。aos.js是一款效果超赞的页面滚动元素动画jQuery插件。aos.js允许您的页面动画元素跟随滚轴上下执行。如果您滚动回到顶部,插件将会重置您的元素动画效果。

HTML

<div data-aos="动画名称">

引入css

<link rel="stylesheet" href="aos.css" />

引入javascript

<script src="aos.js"></script>
<script type='text/javascript' src='jquery.min.js'></script>

事件初始化

<script>
    AOS.init();
  </script>

提供三种全局变量:

  • init – 初始化设置
  • refresh – 重新计算元素位置
  • refreshHard – 初始化数组以及事AOS DOM元素事件触发刷新

禁止使用:

<script>
    AOS.init({
      disable: 'mobile'
    });
  </script>

Fade 动画:

fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

Flip 动画:

flip-up
flip-down
flip-left
flip-right

Slide 动画:

slide-up
slide-down
slide-left
slide-right

Zoom 动画:

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

1条评论
  1. #1

    天下彩说道:

    谢谢分享




TOP