介紹

AOS是一個用在網頁滾動中的動畫庫，顧名思義，AOS是隨著捲軸而伴隨的網頁動畫效果，AOS非常有效的使某些長網頁更加的生動和豐富，對於提升網頁整體質量具備了促進作用。

Github

14.9k stars，可見使用的人還是非常多的

https://github.com/michalsnik/aos

使用方式

下載好相應的js和css檔案

yarn add aos@nextor npm install --save aos@next

import AOS from 'aos';import 'aos/dist/aos.css'; AOS.init();

具體使用

最簡單的就是

AOS.init();

或者也可以自行配置一些選項

AOS.init({  // 全域性配置：  disable: false, // 接受以下值：“phone”、“tablet”、“mobile”、boolean、expression或function  startEvent: 'DOMContentLoaded', // 在document上排程的事件的名稱，AOS應在該事件上初始化  initClassName: 'aos-init', // 初始化後應用的class  animatedClassName: 'aos-animate', // 動畫類名稱  useClassNames: false, //如果為true，將在滾動時將“data aos”的內容新增為類  disableMutationObserver: false, // 禁用自動突變檢測（高階）  debounceDelay: 50, // 調整視窗大小時使用的解除抖動延遲（高階）  throttleDelay: 99, // 滾動頁面時使用的節流延遲（高階）    // 可以按每個元素重寫的設定，按`data aos-*`屬性：  offset: 120, // 從原始觸發點偏移（px）  delay: 0, // 值從0到3000，步長為50ms  duration: 400, // 值從0到3000，步長為50ms  easing: 'ease', // AOS動畫的預設緩和  once: false, // 動畫是否只應發生一次（向下滾動時）  mirror: false, // 當元素滾動過去時是否應該動畫化  anchorPlacement: 'top-bottom', //定義元素相對於視窗的哪個位置應觸發動畫});

使用data-aos屬性設定動畫：

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

並使用data-aos-*屬性調整行為：

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

動畫效果如下：

動圖演示