网站

前言

Aos.js 是一个在页面滚动时呈现动画的 jQuery 插件

安装

Aos.js 可以通过 npm 来安装

1
npm install aos --save

然后将下面的字串放进网站里

1
2
3
4
5
6
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

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

食用

食用 aos 只需要在需要动画的元素上加个 aos 属性

1
<div data-aos="animation_name"></div>

示例：
（没看到可以刷新）

1
<img data-aos="fade-up" src="https://s2.ax1x.com/2019/08/13/mpXWdS.jpg">
1
<img data-aos="zoom-in" src="https://s2.ax1x.com/2019/08/13/mpXWdS.jpg">

当然，也支持自己DIY的特效

更多效果请前往：

AOS - Animate on scroll library
http://michalsnik.github.io/aos/

动画预设

淡出淡入

  • fade
  • 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

更多设置请前往：

GitHub - michalsnik/aos
GitHub - michalsnik/aos
https://github.com/michalsnik/aos/tree/v2
backtop