CSS 網頁滾動特效：GSAP Slide 網頁輪播功能｜陪伴開發｜老師陪我 Coding #12

哈囉,大家好,我是Kasper老師 今天要來介紹的是使用G-Shape這工具來撰寫輪播的功能 雖然輪播有非常多的工具可以直接的完成 但是G-Shape它除了做輪播之外 它本身是非常適合做網頁動態特效的工具 所以如果你今天看了這一集之後 除了可以瞭解如何做輪播的動畫效果之外 你更能去理解G-Shape這個工具有什麼樣的好處 G-Shape它的好處簡單來說就是 它的動態效果非常流暢 另外一個就是非常的簡單易用 好,那我們就馬上開始吧 首先先來看一下程式碼跟畫面的結構 上面這段是CSS 再往下就是我們主要的畫面結構 在這個畫面結構裡面會有一個Carousel Container 這是我們整個輪播的座位外層 它比較偏向是定位使用 再往內的話有Carousel 裡麪包著三個Slide 比較重要的就是裡面的這一層 我們等一下主要會去操作的就是這一層 讓它動了之後會讓下方的三個Slide有輪播的感覺 我們來看一下它實際上運作的概念是怎樣 我們先把開發者工具打開 那就打開我們剛剛所提到的Carousel這一層 在這一層我們等一下會加上Transform 接下來會加上一個Translate X的方式來套用它的位移 因為它包著裡面的三層 所以當它位移的時候 裡面的三層也會開始產生連動 比如說我們把它改成-50% -50%就是我們的第一張往左50% 右邊的這一張也剛好進來 會呈現這樣的效果 所以如果把它改成-100%的時候 它會直接切到第二張 意思就是如果說我把它改成-200% 第三張就會進來 只不過我們等一下在套用的過程中 它不會像這樣直接切過來 它會使用一個動態轉場的效果 接下來繼續往下 再往下就會有兩個按鈕 這顧名思義就是一個是往前一個是往後 我們等一下就會先做往後的按鈕 等一下再把往前的部分給補上 在這個專案裡面我們已經有先開好一個O.JS 所以等一下會從這個空白JS檔來開始做撰寫 目前這個專案還沒有引入GSAP 所以我們會到網頁上 GSAP的官網 進入到Resource 我們會直接把GSAP安裝進來 在這裡還有一個Installation 然後你點選SDN 我們直接使用SDN來做開發就可以了 我們複製完之後 把它貼在網頁的前端 貼進來之後 我們的專案中已經可以使用GSAP 我們等一下全部的程式碼 都會圍繞在這個O.JS上面 我們先使用Console.log來看一下GSAP有沒有正確的裝進來 可以看到在這裡有一個物件 這樣就算成功了 那我們首先要先準備一些前置作業 首先第一個就是說 我們要知道當前的slide有幾張 這會影響到我們要位移的距離有多少 所以我們會先把所有的slide先取出來 然後會使用到Documents 點Create Slider 然後會使用ALT的方式 把所有的slide可以取出來 那這個slide就是單一張一張的投影片 就是我們單一張一張的圖片 就是slide 那再往下我們會把 這整個slide的長度取出來 這個就影響到我們等一下位移的距離 所以會把它定義儲存成一個變數 叫做slides 這是全部的距離 那我們主要存的就是它的長度 這樣就可以了 那另外一個就是我們需要做一件事 就是要知道 當前的輪播應該是到第幾章 那我們會從第0章開始 所以會有一個 Current Index 然後我們把它定義成變數 那我們會使用Late來做定義 我們等一下會去修改它 那到目前為止我們就先只是做初始化的步驟 那接下來我們就直接從Next開始做 就是我們點擊Next之後 要切到下一章 就會使用到Document 點Click Selector 那Next的話它是一個AD 所以我使用點Next的方式 去選取它 那接下來我們會加入一個事件監聽 會監聽就是Click事件 當我點擊它的時候要開始做輪播 所以後面會加上一個Function 就是我們要做什麼事情 那接下來我們就會使用GSAP來進行操作 那GSAP的話 當我們要做到 當它做位移到下一個元素的時候 到下一個階段的時候 我們會使用To讓它進入到下一個階段 好那GSAP裡面會有兩個參數 那第一個參數是我們要選取的物件 選取的元素 那我們剛剛有提到 我們會選取的是它外層Cursor的這個元素 我們就把它給選取起來 那選取完之後後面會加入的是參數 參數指的就是說我要位移多少 然後它時間是多長等等的 好那這裡的話我會做X軸的位移 好那X軸的位移 那X軸的位移呢 我們來看一下 在這裡我們再回顧一下 我們在Cursor這一層會套用的是Transform 然後會使用到Translate 那記得我們在這裡位移 我們要讓它看起來像下一張的話 我們必須往前移-100% -100% 那你會看到像是第一張slider 它是跑出去畫面 然後第二張進來 現在選的是第二張 所以它是-100% 它是負值 所以我們必須把負值加在前面 負值 然後接下來呢 我們必須做一個運算 這邊的運算就是說 我們是100% 然後會把CurrentIndex給乘上來 就是說我們當前是第幾張 去乘以100% 就是它位移的距離 然後接下來呢 我們必須再加上一個就是 這整個運作的時間是多長 那它是秒數 所以我這邊可以輸入是0.5 0.6好了 這是它位移的時間 好那目前來講的話 這個CurrentIndex它會是0 所以我們當點擊的時候 它應該要去加1 所以我們就CurrentIndex++這樣子 好那存檔之後呢 我們就可以來這邊 我們按下下一張的時候 它就會切到下一張 那如果你把開發者工具關起來的話 它會更流暢 好那我們再重來一次 當我按下Next的時候 會切換到下一張 不過目前來講的話 我們到最後一張呢 它就會開始出現問題了 好那到最後一張的時候 我按下Next 它會到全白的 那為什麼會到全白呢 主要就是因為 我們總共的長度是隻有 我們只有三張圖片 所以如果說它的位移距離超過的話 你看連第三張都跑出去了 所以這邊我們的極限 應該就只能到-200% 這樣子而已 所以在這個地方 我們去做一個判斷式 這邊要加上一個判斷式 IF 在我們的CurrentIndex 就是在我們的 我們的索引位置呢 它不會 應該說它必須小於 小於我們的總長度 那我們總長度是3嘛 那其實它是不能超過2啦 我們就減1 我們去減1 那為什麼是會不能超過2呢 因為我們剛剛在乘的時候 我們只能乘以200% 我們不能乘以300% 就在剛剛所示範的 順序裡面 所以在這個地方呢 要稍微調整一下 好那我們就 如果說在這個地方的話 它是 它如果小於2的時候呢 我們就 我們在小於2的時候就讓它增加 如果沒有的話 我們要做其他事情 所以其他事情我們先留白 所以現在我們按下Next的時候 它就沒有辦法繼續往下 它沒有辦法作用 那如果說它超過了 它超過了之後呢 我們要做什麼事情呢 在這個地方的話 我們的程式碼其實差不多 就是這CurrentIndex呢 我們會把它改成0 所以它這乘的部分呢 就變成0 所以我們按下Next 然後再按下去的時候 它會撬回第一張 就是0%的部分 好那接下來呢 你會發現一件事 我們可以直接做往前一張 但是要注意一件事 就是這裡面其實有相同程式碼 這一段程式碼其實是相同的 那我們應該把這段程式碼給抽出來 如果你要抽出程式碼的話 其實你可以使用到一個技巧 我們按下右鍵 然後在這個地方可以選擇 叫做重構的一個方法 那這個重構的程式碼你可以選擇 我們可以把它移到Global範圍 Global範圍中的範圍 那這樣子的話你會發現 這段程式碼是被移出來的 它被移出來的 那這個程式碼呢 我們就是叫做go go to 好我們要位移到一個 特定的slide的位置 那這樣子的話它就會位移過去 好那這裡的話呢要注意一件事 我們這裡的話是一個叫CurrentIndex的參數 那一種方式你可以用傳進來 或者說你要在外層呢 來做修改都可以 都可以 那我們這邊呢稍微調整一下 我們把它改成呢 在這個函式裡面纔去修改 這個Index的字 那我們就把它稍微改一下 這裡呢我們會傳入一個叫做Index 然後呢 它在位移的時候呢會套用這個Index的字 那最後呢我們會把 這個CurrentIndex呢在 這個函式裡面做複製 那不管你在函式外函式內 它都是可以的只是說 我們透過這種方式的話程式碼可以更精簡 好那 接下來呢我們就可以來套用一下 我們就可以把這裡套用成 CurrentIndex加1 那我們加1之後呢 在這個函式裡面 會做套用動態效果 另外一個是把 這個值呢給賦予上去 好那另外一個也一樣 另外一個呢我們可以使用 go to slide然後是0 那這種寫法的話程式碼就更加精簡 我們會在函式裡面做非常多的事情 包含動畫效果 以及複製 好那我們存檔來試一次 這裡的話我們按下next 一直到下一章最後一章之後 它會跳回第一章 所以next的部分已經完成了 那接下來呢我們可以做往前一章的部分 那往前一章呢 它的程式碼其實是非常相近的 我們就一樣使用document 然後click selector來做選取 那我們是選擇往前 一個元素 然後呢我們會加入事件監聽 事件監聽的話會監聽的是 click事件 那後面呢我們會插入一個函式 好那這裡的話一樣會做判斷式 那我們 先直接來做往前一章 那這裡的話就是go to slide 那我們會-1 好那我們現在來試一次 現在如果我們按下下一章 下一章看起來沒問題 然後接下來往前一章 它是可以運作的 好在可以運作之後呢我們就把剩下的判斷式 給補上 所以這裡剩下的判斷式就是說 如果它的位置 至少要比第0章多 它不是第1 它不是第0章 它是在第2章之後它才能往前 所以這裡的話 我們就加入一個判斷式 它必須超過第0章的時候 它才能往前一章 那如果不是的話 也就是說它是第0章的情況下呢 我們就會讓它回到 最後一章的 那最後一章的話 是total size 位置我們要-1 應該不是說往前一章啦 因為我們所有位置必須-1 所以這邊呢total size-1 好那在這個地方的話我們就重新整理 按下PIE 它就會往前一章 往前一章它會到最後一章 接下來呢我們就可以試試看 往前往後是不是都可以正確運行 好那這邊的話呢 它的往前往後 章數切換呢都是沒有問題的 那我們今天呢就介紹如何使用G-Shape 完成這種輪波的功能 如果沒問題的話同學來試試看吧