aos.js参数详解

官网

https://michalsnik.github.io/aos/

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />

基本参数

data-aos="fade-up"//滚动效果
data-aos-offset="200"//触发距离
data-aos-delay="50"//动画延迟
data-aos-duration="1000"//动画持续时间
data-aos-easing="ease-in-out"//动画曲线类型
data-aos-mirror="true"//这个属性是判断动画是否可重复
data-aos-once="false"//是否单次执行
data-aos-anchor="#example-el"//动画执行参照物 
data-aos-anchor-placement="top-center"//动画执行参照位置（默认以window窗口做参照）

//初始化全部参数

AOS.init({
  // 全局参数
  disable: false, //以下参数是否禁用: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // 回调执行条件
  initClassName: 'aos-init', // 默认初始化类
  animatedClassName: 'aos-animate', // 默认动画类
  useClassNames: false, // 将添加' data-aos '的内容作为滚动的类
  disableMutationObserver: false, // 禁用自动突变检测(高级)
  debounceDelay: 50, // 调整窗口大小时使用的反弹延迟(高级)
  throttleDelay: 99, // 滚动页面时使用阻力延迟(高级)
  
  // 基本参数和在元素以data-aos-*设置一样
  offset: 120, //触发偏移量
  delay: 0, // 动画延时
  duration: 400, // 执行时间
  easing: 'ease', // 动画曲线
  once: false, //是否单次执行
  mirror: false, // 是否重复执行动画
  anchorPlacement: 'top-bottom', //动画执行参照位置（默认以window窗口做参照）
});

//初始化常用参数

AOS.init({
  disable: 'mobile',
  //使用函数方式返回禁用值
  //disable: function () {
    //var maxWidth = 800;
    //return window.innerWidth < maxWidth;
  //},
  offset: 200,
  duration: 800,
  easing: 'ease-in-quad',
  delay: 100,
});

//自定义aos动画

将自己的自定义动画添加到AOS也是非常简单的。

只需创建一个data-aos属性选择器并将其设置为自定义动画的名称即可。

接下来，添加要为其设置动画的属性的初始值，以及将transition属性设置为要设置动画的属性的名称。

例如，假设您的动画称为rotate-c ，并且对其应用的元素最初被旋转-180度。

这是CSS的外观：

[data-aos="rotate-c"] {
  transform: rotate(-180deg);
  transition-property: transform;
}

要设置动画的最后阶段（在我们的示例中，这是将元素从-180度旋转到0度），请在前一个规则的下方添加以下CSS规则：

[data-aos="rotate-c"].aos-animate {
  transform: rotate(0deg);
}

现在将data-aos="rotate-c"到您选择的HTML元素中，当用户将该元素滚动到视图中时，它将顺时针旋转（从-180度到0度）。

这是一个实时演示，使用上述方法显示了顺时针和逆时针的自定义旋转动画

除了init() ，AOS还提供了两个附加功能： refresh()和refreshHard() 。

refresh()用于重新计算所有元素的偏移量和位置。 在诸如窗口调整大小之类的事件上会自动调用它。

每当以编程方式从DOM中删除新元素或将其添加到DOM中时，都会自动调用refreshHard() 。 这样库就可以保持AOS元素数组的更新。 数组更新后， refreshHard()还会触发refresh()函数以重新计算所有偏移量。

//详细参数属性
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