介紹

AOS是一個用在網(wǎng)頁滾動中的動畫庫，顧名思義，AOS是隨著滾動條而伴隨的網(wǎng)頁動畫效果，AOS非常有效的使某些長網(wǎng)頁更加的生動和豐富，對于提升網(wǎng)頁整體質(zhì)量具備了促進(jìn)作用。

Github

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

https://github.com/michalsnik/aos

使用方式

下載好相應(yīng)的js和css文件

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

 <script src="./dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

或者使用包管理工具

• yarn add aos@next
• or 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上調(diào)度的事件的名稱，AOS應(yīng)在該事件上初始化
  initClassName: 'aos-init', // 初始化后應(yīng)用的class
  animatedClassName: 'aos-animate', // 動畫類名稱
  useClassNames: false, //如果為true，將在滾動時將“data aos”的內(nèi)容添加為類
  disableMutationObserver: false, // 禁用自動突變檢測（高級）
  debounceDelay: 50, // 調(diào)整窗口大小時使用的解除抖動延遲（高級）
  throttleDelay: 99, // 滾動頁面時使用的節(jié)流延遲（高級）
  

  // 可以按每個元素重寫的設(shè)置，按`data aos-*`屬性：
  offset: 120, // 從原始觸發(fā)點偏移（px）
  delay: 0, // 值從0到3000，步長為50ms
  duration: 400, // 值從0到3000，步長為50ms
  easing: 'ease', // AOS動畫的默認(rèn)緩和
  once: false, // 動畫是否只應(yīng)發(fā)生一次（向下滾動時）
  mirror: false, // 當(dāng)元素滾動過去時是否應(yīng)該動畫化
  anchorPlacement: 'top-bottom', //定義元素相對于窗口的哪個位置應(yīng)觸發(fā)動畫

});

使用data-aos屬性設(shè)置動畫：

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

并使用data-aos-*屬性調(diào)整行為：

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

動畫效果如下：

動圖演示

天津市犀思科技有限公司是專業(yè)從事web應(yīng)用定制開發(fā)的一家公司，主營業(yè)務(wù)包括定制營銷型網(wǎng)站建設(shè)、微信小程序開發(fā)、微信公眾號開發(fā)、APP定制開發(fā)、天津企業(yè)微信開發(fā)、ERP、CRM、OA等企業(yè)應(yīng)用場景信息化解決方案等服務(wù)，致力于成為中國領(lǐng)先的IT服務(wù)及行業(yè)解決方案的提供商。