AOS 动画滚动库

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

• 直接引用

• 采用包管理安装
• yarn add aos@next
• or npm install --save aos@next

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();


AOS.init({
  // 全局设置
  disable: false, // 禁用条件 'phone', 'tablet', 'mobile', boolean, 表达式 或 函数
  startEvent: 'DOMContentLoaded', // 初始化的事件名称
  initClassName: 'aos-init', 
  animatedClassName: 'aos-animate', 
  useClassNames: false, 
  disableMutationObserver: false, 
  debounceDelay: 50, // 调整窗口大小时为防止抖动延迟时间
  throttleDelay: 99, // 滚动页面时 延迟时间
  
  offset: 120, // 是立刻触发动画还是在指定时间之后触发动画
  delay: 0, // 动画的延迟时间
  duration: 400, // 动画持续时间
  easing: 'ease', // 动画的easing动画效果
  once: false, // 动画是否只会触发一次,或者每次上下滚动都会触发
  mirror: false, // 锚元素。使用它的偏移来取代实际元素的偏移来触发动画
  anchorPlacement: 'top-bottom', // 锚位置,触发动画时元素位于屏幕的位置

});

<div data-aos="fade-in"></div>


 <div
    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-placement="top-center"
  >
  </div>

API-github
DEMO示例