日志樣式

犀思科技技術分享——讓網頁更加生動，網頁滾動動畫效果——AOS.

標簽 :

介紹

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

Github

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

https://github.com/michalsnik/aos

使用方式

下載好相應的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上調度的事件的名稱，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>

動畫效果如下：