aos html

AOS-Animate 套件運用

郭怡玲 Sabrina Guo 2022/05/06 10:00:00

0 4739

不知道大家有沒有遇過，當設計師畫好畫面，

你也嘔心瀝血、不眠不休用HTML、CSS刻出一個跟設計稿一模一樣的網頁時，

看著成果，左看右看就是少一味？

沒錯，你沒有想錯，就是少一味！

「過於安靜」

如果你想要畫面簡單進場動畫，像是頁面往下滾時，會有圖片或文案浮現的效果，

製造一些熱鬧活潑不死板的感覺，又不想要花太多的心思，那就讓我們一起踩在巨人的肩膀上吧！

這次要踩的巨人肩膀是 AOS.js，

安裝上沒什麼太大的曲折，只需要在HTML上引用他的CSS跟JS，初始化就可以了！

看起來是不是很簡單？

先行附上他們提供的CDN，

CSS：

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

JS：

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

引用完畢之後，就在下方執行初始化：

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

我們的基本配備就完成了！

他的官網上也放置了許多範例，你可以看喜歡的就把他複製起來，

貼到你想要進行動畫的div、img...各種元素都可以．

有這種初階款：

也有組合包：

複製完之後，如果想要自己修改的話，可以點擊官網右上方的github，

他也有提供一些屬性內容讓你進行調整，

但要修改前，得先知道各個屬性是什麼意思：

data-aos = 呈現的效果 (fade、flip、zoom任君挑選，官網中有Animations可以挑)

data-aos-duration = 出場持續時間 (單位是毫秒，所以1000代表1秒)

data-aos-delay = 遲延秒數

data-aos-offset = 卷軸滾到多少px才觸發

data-aos-easing = 動畫執行速度 (官網中有Easing functions可以挑)

data-aos-once = 觸發一次或上下滾動都觸發 (用true或false)

data-aos-anchor-placement = 滾動到哪才觸發 (可用top-bottom、center-bottom、bottom-bottom等屬性值)

“top-bottom” 指的是「該元素的頂端」在瀏覽器的下方，也就是剛剛要出現時，觸發動畫。

”center-bottom” 指的是「該元素的中間」在瀏覽器的下方，觸發動畫。

”bottom-bottom” 指的是「該元素的底部」在瀏覽器的下方，觸發動畫。

所以一般從上往下捲動網頁時，該元素的出現快慢是 “top-bottom” > “center-bottom” > “bottom-bottom”。

上述的文字解釋，是來自這篇文章以及這篇文章，感謝巨人．

在閱讀官網的說明時，我發現還有一個東西也是挺不錯的，

<div data-aos="fade" data-aos-anchor=".other-element"></div>

data-aos-anchor ＝當你滾到這個元素時，會同時叫出.other-element的元素動畫．

實作如下：

    <div class="box">無動畫效果</div>
    <div class="box" data-aos="fade" data-aos-anchor=".other-element">fade</div>
    <div class="box" data-aos="fade-down" data-aos-delay="1000">fade-down</div>
    <div class="box" data-aos="fade-left" data-aos-easing="ease-in-out">fade-left</div>
    <div class="box other-element" data-aos="zoom-in-up">zoom-in-up</div>

當我滾到 fade時，也會同時呼叫出下方元素 class="box other-element" 動畫 zoom-in-up．

示意圖：