[ AOS Animations ] 如何自訂義動畫 Animate On Scroll

標籤: , , , , , , , ,

 

上一篇有教大家基本的 AOS Animations 使用方式,這一篇要給有需要自訂義動畫的夥伴們所使用。

 

基本使用方式

連結支援:[ AOS Animations ] 滾動到此時執行動畫 Animate On Scroll

 

要自訂義動畫並不難,請先下載我寫的範例

進階範例下載 請開啟 advance.html 的檔案

 

打開範例以後可以看到新增動畫的方式,分為初始和最終呈現的樣子(使用者看到的樣子)我們動畫的運行方式是這樣子的初始到最終呈現。

 

所以,可以把你要新增的動畫以我這樣子的方式去做新增。

[data-aos=”動畫名字”]{

    填寫動畫的初始樣子

}

[data-aos=”動畫名字”].aos-animate{

    填寫動畫的最終樣子

}

以這樣的方式新增之後就可以套用在我們的 HTML中。

 

以上就是 AOS Animations 自訂義動畫的方式,是不是非常的方便呢XD

這個資料庫本身設計還不錯不會非常難懂,在 codepen 的例子也算是蠻多的,所以要做什麼彈性的變化也是非常方便的。

其實關於 AOS Animations 自訂義動畫也有相關文章的教學,可以搜尋 css-tricks。

 

CSS動畫(CSS Animations)真的替網頁增加許多豐富且有趣生動的效果,可以讓網頁質感提升同時也可以做一些和使用者互動的效果,所以把CSS動畫(CSS Animations)學好是一件非常重要的事情呢XD。

 



相關文章

CSS Animation 如何用CSS來製作動畫的效果? (下集)... 今天要繼續跟大家介紹如何使用 Animation 的屬性,沒有看過上集的你 請點我看上集 ,那麼有看過上集的人我今天就要繼續介紹囉! ▲ 介紹內容 1. animation 可以製作什麼樣的效...
CSS Animation 如何用CSS來製作動畫的效果? (上集)... 今天要來介紹 如何用 CSS 製作動畫的效果 ,CSS 中有一個 Animation 的屬性,他的概念和 Flash 的動畫影格差不多,可以設定某個影格的樣子也可以設定持續時間和淡入淡出等效果,只...
JQuery 點擊後滑動到某個區塊(4/19新增語法說明與GoTop功能)... 今天要做的功能是 1. 點擊一元素後到達某個區塊 2. 點擊一元素後回到網頁最頂端 使用的語言是JQuery   簡述 這個功能類似快捷鍵可以運用在蠻多地...
Loading 製作載入中畫面 (8/9更新:Safari 載入問題)...   此篇文章要教大家如何製作 Loading 畫面,在瀏覽網站的時候有時候會看到有些網站有 "過場畫面" ,當整個網頁載好時才會讓使用者看到完整的畫面,這樣有什麼好處呢?可以讓網頁更有...