點擊想要使用的動畫效果範例。
複製 CSS 到你自己的檔案之中。
複製到 HTML 到你自己的檔案之中。
官網:https://michalsnik.github.io/aos/
說明文件:https://github.com/michalsnik/aos
在螢幕畫面中上下滑動頁面時,滑到指定位置,觸發動畫效果。
官方提供的初始化:
data-aos:套用哪個動畫效果,官方提供。
在想要套用的元素上,加上 data-aos 屬性及動畫效果,例:
最後再執行以下 JS 程式:
data-aos-easing:官方提供。ease 是預設。
data-aos-duration:0 ~ 3000 毫秒。400 是預設。
data-aos-delay:0 ~ 3000 毫秒。0 是預設。
data-aos-once:是否僅執行一次( true 或 false )。false 是預設。
藉由以下範例,自行測試上述四個屬性:
data-aos-offset:預設是 120,單位是px。當螢幕的下方經過該元素之後,這 120 指的是該元素的上方、螢幕的底部,距離是 120px 時,會觸發動畫效果。
以下範例請將 data-aos-offset
由 120 改為 0,觀察看看,也就是該元素的上方、螢幕的底部碰到的時候,就觸發動畫效果。
data-aos-anchor-placement
:預設值是 top-bottom
,第一個 top 指的是該元素的上方,第二個 bottom 指的是螢幕的下方。分別可以各自改成 top
、center
、bottom
的組合(例 center-center
),以達成該元素的哪個位置碰觸到螢幕的哪個位置時,觸發動畫效果。
以下例子 data-aos-offset
設定成 0,data-aos-anchor-placement
沿用預設值 top-bottom
,以便觀察:
改成 top-center
(該元素的上方、螢幕的中間),然後自己做一個動畫效果的「觸發提示線」,以便觀察:
data-aos-anchor
:將該元素的觸發位置,改由另一個元素去決定觸發時機。
以下例子碰到黃色區域的時候,紅色元素的動畫效果就會觸發:
撰寫如下 css( 屬性 data-aos 等於 rotate-animation ,創造一個旋轉 360 度的動畫效果),接下來直接在標籤加上 data-aos 屬性,然後再加上 rotate-animation
的值,就可以創造自訂的動畫效果了:
觀察:在動畫效果觸發的時候,會自動加上 aos-animate
樣式。
撰寫如下 css( 屬性 data-aos 等於 my-blink-animation ,創造閃爍效果),接下來直接在 data-aos 屬性上,加上 my-blink-animation
的值,就可以創造自訂的 keyframes 動畫效果了:
依照下圖,可以直接下載官方所提供的 CSS:
在想要套用效果的元素上,加上這 animate__animated
個 class。
然後再加上想套用哪種效果的 class,例如 swing
,就再加上 animate__swing
是不是會有效:
試著套上 heartBeat、fadeIn 動畫效果。
只要加上 animate__infinite
這個 class 即可。
例如:
animation-duration:在外掛的官方定義中,預設是 1 秒。
animation-delay:在外掛的官方定義中,預設是 0 秒。
animation-iteration-count:在外掛的官方定義中,預設是 1 次。
有的時候動畫效果樣式,是在使用者做了某種行為之後,才觸發動畫效果。
例如以下範例:使用者點擊按鈕,觸發動畫效果的執行:
動畫效果只會觸發 1 次?
jQuery CDN:
利用官方提供的函式:(不需要瞭解這個函式裡的程式細節,只需要知道怎麼用這個函式即可)
函式說明:
在 .the_block
這個元素上,加上 animate__bounce
這個 class(同時也會加上 animate__animated
這個 class)。
效果執行完後,會自動移除 animate__animated
和 animate__bounce
這兩個 class。
只要在 animateCSS()
後面,再加上相關的程式即可: