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

 



相關文章

Html5 Video Autoplay 影片自動播放 今天要教大家如何製作自動播放影片的網站,有些網站會直接將影片變成首頁的背景這樣的確能夠吸引使用者的注意力而且也能夠替網站創造獨有的風格。可以看到這個免費影片素材的網站 傳送門  Banner 的部分是...
HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...
判斷手機系統 為 iOS 或是 Android 今天要和大家分享一個JS語法,這個語法可以判斷手機的系統,在我們寫網頁的時候時常會遇到 iOS 和 Android 手機頁面長的不同的困擾,這時候就會覺得 iOS 很麻煩為什麼要這麼特立獨行,但是作為...
Scroll Animations 網頁滾動時播放動畫   今天要介紹幾個當網頁滾輪滾動時播放動畫的製作方式,一共有4個方法,目前我最常用的是Scroll Me。其他的大家可以嘗試試看看自己喜歡哪種方式。會了這些工具可以讓網頁在瀏覽的時後比...