[ 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

 

 



相關文章

Scroll Animations 網頁滾動時播放動畫   今天要介紹幾個當網頁滾輪滾動時播放動畫的製作方式,一共有4個方法,目前我最常用的是Scroll Me。其他的大家可以嘗試試看看自己喜歡哪種方式。會了這些工具可以讓網頁在瀏覽的時後比...
Loading 製作載入中畫面 (8/9更新:Safari 載入問題)...   此篇文章要教大家如何製作 Loading 畫面,在瀏覽網站的時候有時候會看到有些網站有 "過場畫面" ,當整個網頁載好時才會讓使用者看到完整的畫面,這樣有什麼好處呢?可以讓網頁更有...
判斷手機系統 為 iOS 或是 Android 今天要和大家分享一個JS語法,這個語法可以判斷手機的系統,在我們寫網頁的時候時常會遇到 iOS 和 Android 手機頁面長的不同的困擾,這時候就會覺得 iOS 很麻煩為什麼要這麼特立獨行,但是作為...
如何寫SCSS #1-1 上篇跟大家提到如何開始寫SCSS的時候有推薦一個工具,但是其實有更好的編譯方式,只要下載 VS code 的外掛就可以馬上編譯。 這款外掛就是:Live Sass Compiler 下載好VScod...