嗯 這週本來要來寫BS4的寫法
但..........

這星期的切版直播班學到一個超好用的套件，真的讓我驚訝不已!!!
所以這週就先寫 AOS的筆記吧XDD

AOS 是什麼

AOS是一種視覺滾差的工具套件之一，他是一款蠻好手上的滾動式動畫的資料庫，可以自定所需的效果，是很方便的套件，雖然AOS是用 JS去撰寫的但不會JavaSript的新手也能輕易上手，因為他都幫你寫好了，直接套用就好，超方便der!!!

網址在此：https://michalsnik.github.io/aos/

AOS 的用法

首先我們需要引入 AOS 網址裡的 CSS及 JavaScript，在 </body>前加上以下程式碼：

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
 AOS.init();
</script>

在 AOS 裡，有分全域設計及單一設計

全域設計

AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

單一設計

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

這裡以單一設計為範例

接著再看到 body 裡面的 html 在想要讓他視覺滾差的效果必須要有 data-aos=”動畫名字”

這是這次作業練習的其中一個部份，出來的結果為：

https://qizhen-lin.github.io/profile/profile.html

我發現我做的視覺滾差超醜的XDDD
不過這不是重點，重點就是 AOS 真的超簡單，讓我不會JS的新手都能不到五分鐘就能寫好視覺滾差XD
發現寫程式越來越好玩了