【CSS】AOS Animate on Scroll 觸發事件_區塊突現

*aos.js、aos.css觸發事件_區塊突現
➤aos.js觸發事件達到區塊突現

繼上次的wow.js滾動卷軸觸發事件突現，棧長前段時間在github那邊遊蕩時，偶然找到一位波蘭工程師(謝謝這位波蘭鄉民的無私分享~純推也要下)掛在github分享的AOS.js，他已經將整個範例掛在他的github網站上，在下方我有崁入他的網站供大家瀏覽。

在該網站有提供讓您滾動卷軸時，能觸發區塊來呈現出突現進場的效果(FADE突現、FLIP翻轉、ZOOM由大變小等。aos變化效果雖沒有wow來的多，但基本上已經很夠用了)。
傳送門 > https://michalsnik.github.io/aos/

➤如何加入自己的網頁上
1.複製貼上aos.js和aos.css的絕對路徑
(1)直接複製下方的css和js絕對路徑，並且插到網頁內的<head>標籤內。

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

(2)接著再複製貼上AOS.init();的js方法

<script>
  AOS.init();
</script>

建議放在</body>前面，避免client端瀏覽載入頁面時造成遲延(這是DOM的觀念這邊就不贅述嚕~如果各位有再用jquery的一些特效，盡量放在下方為宜)。

*以上(1)(2)的部分您也可以直接進到AOS網站內直接滾到最下方複製貼上也可以。AOS網站滾到下方就會看到下圖的樣子。

2.觸發aos.css 區塊突現效果
點入網站後(如下圖)，可以看到有FADE突現、FLIP翻轉、ZOOM由大變小等等的各式效果，依據您想要的效果直接複製貼上就好。

3.AOS屬性說明:
data-aos = 呈現的效果  //fade、flip、zoom任君挑選
data-aos-duration = 出場持續時間  //單位是毫秒，所以1000代表1秒
data-aos-delay = 遲延秒數
data-aos-offset = 卷軸滾到多少px才觸發
data-aos-easing = 動畫執行速度  //個人試過覺得效果不大
data-aos-once = 觸發一次或上下滾動都觸發  //用true或false
data-aos-anchor-placement = 滾動到哪才觸發  //這邊可用top-bottom、center-bottom、bottom-bottom等屬性值，建議後面的值維持-bottom即可，若是後值改為top會發現怎麼滾了整大頁面才彈跳出來...

以上效果我也只有試了幾個，棧友們有興趣再自己玩玩看呦!😙