软件简介

AOS（Animate on scroll）是小型动画滚动库，可在页面滚动时给元素添加动画效果。CSS3 驱动，效果类似于 WOWJS。

构建

安装 AOS

使用 bower

bower install aos --save

使用 npm

npm install aos --save

去Github仓库下载 https://github.com/michalsnik/aos

Link styles

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

Add scripts

<script src="bower_components/aos/dist/aos.js"></script>

AOS 从 1.2.0 版本可用作 UMD 模块，因此您可以将其用作 AMD，Global，Node 或 ES6 模块。

Init AOS

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

例子：

1、  body[data-aos-duration='4000'] [data-aos],
  [data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
  }
2、  <div data-aos="fade-in" data-aos-duration="4000"></div>

动画效果Animations

• Fade animations:

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

• Flip animations:

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

• Slide animations:

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

• Zoom animations:

  • 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

Anchor placements:

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

Easing functions:

• 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