[ AOS Animations ] 滾動到此時執行動畫 Animate On Scroll

標籤: , , , , , , , ,

 

今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回去的時候他會回到起始點當滾輪在滾下來時重複播放動畫,這樣子的功能讓我覺得蠻喜歡的。(不會寫 JS 時有這樣的資料庫就很好用XD)

此篇為 AOS Animations 使用的基本教學有需要了解如何自訂義 AOS Animations的人請在結尾參考另一篇文章。

 

先前準備

首先大家可以先點開官方網站  AOS Animate On Scroll Library 查看一下他的效果是如何。當你滑動頁面時會播放動畫的資料庫/套件。

 

使用說明

了解他的功能之後我們就要知道如何使用,首先先載他提供的檔案(如圖)

 

下載下來之後打開到這個資料夾(如圖)

 

打開 simple.html這個檔案到你的編輯器(我是使用 visual studio code 。 其他工具:sublime和記事本等都可以開啟,只要看得到檔案內容即可。)

打開來後會看到以下樣子

接著我們就要來分析他需要那些功能,首先可以看到在 head 的地方有兩個 link 分別是 style.css 與 aos.css

style是網頁本身的樣式,必定要 link 的是 aos.css 這個裡面是 AOS 提供的 css動畫

 

接著再看到 body 裡面的 html 在想要讓他播放動畫的元素必須要有  data-aos=”動畫名字” 

 

然後在結尾的地方有個 aos.js  這個也是必定要引用的東西,是用來控制滾輪播放動畫的時機的。

以及下方的 AOS.init 這個也是必定要使用的東西,就像是我們執行 css animation 的時候有三個必定要出現的東西

忘記了? [ CSS教學 ] CSS Animation 如何用CSS來製作動畫的效果? (上集)  幫你複習

 

AOS.init設定

AOS.init 這個涵式裡面可以打動畫的相關設定,例如:持續時間和延遲時間等。

小小提醒:AOS.init 有哪些屬性可以用?眼尖的你可能已經發現官網有一些提示。

或是什麼都不打,但是一定要記得你的檔案裡面要有他,這樣才可以順利執行。

 

總結

綜合以上的使用說明這邊做個總結:

  1. 在 head link aos.css
  2. html 元素 data-aos=”動畫名字”
  3. body結尾前 先引用 script aos.js 再打上 AOS.init  的涵式
    提醒:JS最重要也最容易忽略的地方就是引用的順序。

有這以上三點就可以順利執行了。

基本範例下載 請開啟 basic.html

 

了解基本使用方式之後就可以再了解如何自訂義AOS Animations唷!

請看下篇:[ AOS Animations ] 自訂義動畫 Animate On Scroll

 

 



相關文章

Html5 Video Autoplay 影片自動播放 今天要教大家如何製作自動播放影片的網站,有些網站會直接將影片變成首頁的背景這樣的確能夠吸引使用者的注意力而且也能夠替網站創造獨有的風格。可以看到這個免費影片素材的網站 傳送門  Banner 的部分是...
免費圖片與背景圖 (Free Background)   好久沒有新增文章了,最近稍微偷懶了一陣子,真是不好意思呢。 相信在做網頁設計的時候常常需要一些素材來製作整個網站的風格,而今天介紹的網站素材是可以用於個人行為或是商業化(有經...
HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...
刪除 wordpress 自動產生的 p 與 br 如何刪除 wordpress 自動產生的 p 與 br呢?如果有自己架站的話就知道當我們想要用文字編輯器來撰寫自己的版面的時候總是會莫名其妙生出 p 或是 br 導致排版亂掉。當遇到這總情況的時候總是...