CSS 網頁滾動特效：ScrollTrigger 滾動觸發｜陪伴開發｜老師陪我 Coding #11

哈囉,大家好,我是Kasper老師 那今天要來介紹一個是G-Shape裡面的滾動觸發 那我們首先先來說明一下它等一下會怎麼樣運作 那等一下在滾動過程中往下滾 它的文字就會隨著我滾動的距離慢慢的進場 那圖片也一樣,就是隨著我滾動範圍慢慢的進場 那滾動也會看我是要從左邊進來還是右邊進來都可以 那麼在過去如果要寫這種滾動效果 它就會有兩種情況 第一種就是它程式碼超長、超難寫 第二種就是它滾到那個地方,它有進場 但是它進場就只有一種效果,就是直接進來 它沒有辦法隨著我的滾動範圍慢慢的進場 或是慢慢的出場 那我們今天就來介紹G-Shape裡面的Scroll Trigger 它怎麼樣的去使用它 那首先先來看一下當前的範例 那一次滾到底的話 就可以看到它上面一段文字 那中間會有幾個區塊或是圖片 那下方應該是文字就這樣結束 這個範例是我在CodePen上面找到 那蠻適合來做G-Shape的解說 那我們今天就來示範 那在程式碼的部分 我們的樣式的部分其實不用仔細看 在這段程式碼下 不管是套用哪一種CSS 其實它都可以運作 只不過有一個地方要特別注意 就是它這個圖片它其實是超出去的 它有超出去這個範圍 那在最外層你一定要加上一個Wrapper 就Demo Wrapper的話 它會把Overflow的X Hidden 就是它超出的部分它就沒有辦法滾動 這一點要特別注意 那其他的話倒是沒什麼限制 那在結構上的話 有另外一個地方要稍微注意一下 就是它每一個滾動的區塊 它的最外層都是Session 它都是最外層都是Session 那麼在內層還會再包一個Wrapper 所以它至少會有這兩層 就是Session跟Wrapper 這一個算是整個範例裡面 第二個重要的地方 第一個就是在最外層會有一個 最外層Demo Wrapper的話 它會套用一個Overflow X 那另外一個就是它的 要滾動的區塊它都會有包含兩個結構 一個是Session 另外一個是Wrapper 那這兩個結構就會影響到整個的滾動 好 那我們就準備把我們的G-Shape 還有它的相關套件給載入進來 那我們就進入到G-Shape 在G-Shape的網頁裡面 先點開Resource 那我們一樣在Installation裡面 可以找到CDN 我們就可以直接把它給載進來 但是這次的範例會加上一個Scroll Trigger 就是滾動觸發的一個條件 我們把這整段給載入進來 所以就回到我們解釋碼最上方 我們加入一個Scroll Trigger 還有G-Shape 這兩段把它給載進來 那麼載進來之後我們回到畫面最下方 在最下方已經有先準備好一個Sweep 我們在這一個地方就要準備來 來撰寫程式碼 所以在一開始會先做一件事情 就是G-Shape 我們也會載入Scroll Trigger 它是另外一個套件 所以會加入Resistor 就是我們要註冊這個額外的套件 會註冊的就是剛剛所載入的Scroll Trigger 這個是滾動觸發的套件 接下來我們要開始來做互動的部分 在互動的部分 我們先把多餘的區塊先註解起來 我們先留一個區塊 等一下在除錯上面會比較容易一點點 所以我們在這邊 可以看到這邊有一個Session 我們選擇這個 這是Session的結尾 這個Session的結尾 我一直把到前面這個都註解起來 我們只保留一個Session 這個是方便我們除錯使用 所以我們先把多餘的Session先把它關掉 等一下我們預期會有非常多的Session 所以我們還是要把它當作陣列來做處理 所以這裡會使用到一個方法 就是G-Shape裡面的一個方法 雜項裡面會有一個Tool Array的方法 這個Tool Array的方法會選取 我們畫面上已經有的所有的Session 我們先來看一下這個會是什麼東西 我們直接把它放在Console Log裡面 簡單來講它就是一個陣列 然後去選取所有的元素 就這樣子而已 非常單純 因為我剛剛把它註解掉只剩一個了 所以它只剩下一個Session 當它是一個陣列之後 我們就可以把它當作陣列來做使用 所以可以把它使用Foreach 剛剛有提到 因為我們把它當作會有多個 所以我們就把它使用Foreach來做處理 這裡面是選取多個Session 那在這個地方的話 我們就會使用Session 這是單一個Session 然後還有包含它的Index 就這樣子 然後我們可以直接使用Console Log來看一下 Session以及Index 目前的話只有一個 然後它的所影位置會是0 剛剛有提到另外一件事就是 除了Session之外 我們還需要的是它裡面的這個Wrapper 所以我們就必須把這個Wrapper也取出來 那這個Wrapper就等於 我們會使用到Session的Query Selector Q U E R Y 然後我們會選取裡面的Wrapper 那接下來 聽錯 那我們就選取裡面的Wrapper 那我們可以看一下這個Wrapper 其實它就是單一元素 就是它的內層 就這樣 所以目前已經選好了Session以及Wrapper 我們都把它選起來 那選起來之後 我們可以開始來做定位的部分 那定位的部分會稍微比較複雜一點點 我們必須先稍微簡單畫圖 讓大家瞭解一下 這個是我們的畫面 這是我們的可視範圍 那目前來講的話 這個Wrapper應該說這個Session 它所佔的空間是這一段 這是我們的Session 那另外一個會是我們的Wrapper 那Wrapper的話是包著比較大的內容 它實際的寬度大概會是這樣子 它會非常大 這是我們的Wrapper 所以我們必須把這個位置都先了解一下 好 那我們會使用到的方法 是GSAP的一個叫做Front2 它會定義兩個點 那首先我們必須把我們的 要選取元素帶進去 這是我們Wrapper 那在它裡面會帶入兩段參數 第一段參數是它的起始位置 那第二段參數就是它結束位置 那起始位置的話 我們這邊的話可以說 那有些部分我們會使用到Const 這邊先直接寫好了 X會是100% 好 那這X100%是什麼概念 就是說我們有一些元素會從這邊開始 就是100%開始 那就是說它會從這邊進場 就是從右邊推過來 那有一些我們會從這邊進場 就是從左邊進來這樣子 所以會有100%跟0 所以一開始這一段我們先做100% 就是從右邊進來的 那我們可以把它拉出來做定義 Const X等於100% 好 那我們把程式碼稍微調整一下 好 那另外一個就是說 我們要定義它結束的點 那結束的點會在哪裡呢 好 那我們剛剛有提到一件事 這是我們的起始位置 這個位置應該就是我們的 算是零點 那零點的話 這個就是我們Wrapper的起始位置 Wrapper的起始位置 那它最後應該會移到這個位置 移到這個地方 它會整個移進來 所以我們實際上要標在程式碼的位置 會是在這個地方 那這個位置的距離 應該就是整個Wrapper的位置 但是會扣掉中間這一段Session的地方 我們會把它扣掉 所以會減去Session 那這一段會是一個負值 因為它們會移到整個最前面 所以它會是一個負值 所以它會乘以負一 它會變成一個負值 才會移到前面去 好 那我們來看一下這段程式碼 要怎麼樣去做撰寫 所以這一段我們必須撰寫一段公式 這段公式也沒有很長 我們會定義它的最終距離 會是我們的Wrapper 去減它的總寬 那總寬的話會是 然後去減掉我們外層 剛剛所提到外層的寬度 外層的話是Offset Offset的寬度 好 那這個Scroll Width 跟Offset的Width比較不同的一點是 這個Scroll Width會包含 我們整個元素的總寬度 就算它被裁切了 它一樣會把全部的寬度給算進去 然後再扣掉 我們剛剛實際所見到的空間 好 那這個是我們的終點位置 好 那這邊的話我們可以直接去 我們必須乘以負一 乘以負一 存檔之後 我們來看一下 這邊存值碼有錯 這邊的話會是 沒有把這個值給帶進來 那帶進來之後 它的位置會是從 它剛剛有稍微閃一下 從右邊進來 它會從右邊進來 好 那我現在還沒有加入滾動事件 但是它的範圍 位置至少是正確 那在後面呢 我們就可以加入 滾動的觸發條件 好 那這裡的話就會使用到 我們剛剛所註冊的 Score Trigger 好 那我們這邊會改成 使用小寫來做開頭 那Score Trigger呢 在這個地方我們會加入的是 觸發器 我們是因為什麼樣的條件觸發 那條件的話呢 就是我們 所進來的這個元素 所以這個觸發的條件 是Session 就外層那個Session 然後呢 後面呢 後面還可以加入其他材質 我們先這樣子 來 我們先重新整理 重新整理之後 你會發現滾進來的時候 它就有觸發 來 它現在的觸發條件 會是滾進來之後觸發 但是它觸發是一次觸發到底 所以它沒有 因為我滾動的位置 它稍微動一下動一下這樣 那如果你想要讓 隨著你的滾動距離來做觸發的話 你可以再加入一個單字 SCRUB 好 那你會給它一個子 這是它的敏銳度 那存檔之後 我們再來一次 重新整理 接下來你會看到 我滾的每一次滾動的時候 它都會去位移一小部分 它就會隨著我們的 捲軸來進行觸發 好 那現在呢 其實也差不多了 那我們就可以把 所有的Session都把它打開 那因為我們功能其實已經寫 差不多了 所以可以把Session打開 那Session打開之後呢 我們可以往下滾 往下滾之後 它的元素就會慢慢進來 元素就會慢慢進來 它會因為我們的 Session 我們滾到的位置 所觸發Session才進來 所以它會感覺起來 它的順序 是不一致的 好 那所以這段程式碼看起來 是這麼簡單 不過呢 我們可以讓它再豐富一點點 那我們剛剛在觸發的時候 都是由右邊進場 那我們可以把它改成有部分呢 是左邊進場 用交錯的方式 好 那交錯的方式呢 我們就可以用到後面的縮影子 那這裡怎麼使用呢 我們可以使用到一個叫做取餘數 好 我們先使用index %2 就是去除以2 那我們去取得它的餘數 那我們來看一下它的結果是什麼 來 這邊我們打開之後 你可以看到它的餘數就是0 跟1 它的0除以2 它的餘數是0 1除以2 它的餘數是1 所以這一段是取餘數的概念 那這樣的話0跟1 0跟1 之間就會產生一個交錯 我們就可以有一個真假值的交錯 那我們就可以來這樣子做 依附index%2 這個就是餘數 我們把上面這一段程式 先移進來 剛寫的先把它移進來 還有這一段 直接把它 移到這個衣服裡面 存檔之後 回到畫面上 在這個地方呢 我們進場的時候 它就會有一列有進場 一列沒有 至少它已經 做好一半的交錯 接下來我們再做另外一半 所以在這個地方呢 可以再補上一個else 在這一段else裡面呢 我們剛剛的進場是有 我們剛剛是從 右邊進場 那我們這次會把它改成 從左邊進場 左邊進場的話 這個程式碼這一段是接近的 這段原則上是一樣的 會有不同的點呢 就是在它的x跟end 我們剛剛在x沒有套用 在x呢 應該會套用過來 那 這邊的話 好 我們這邊呢 一樣會套用x跟end x的const x 然後跟const的end xend 這兩個呢 我們都會定義 那這個end的部分呢 會到0 就是我們會 從 到時候 等一下呢 我們比較不同點是 這邊我們先返回 這是我們結束的位置 結束呢 應該會停在這個位置 那我們x呢 會是從 這邊 從左邊進場 所以它的計算方式呢 會跟剛剛不太一樣 那左邊進場其實它非常容易 我們只要把這整個距離 去乘以0.1 就變負值就好 我們可以把 這個rep的值呢 直接乘以負1 它就變負值 它就會從 負值的地方來計算 所以這個地方比較容易 所以我們就會使用到reper 的score width 然後去乘以負值 這樣就好 乘以負1 這樣就可以 好 那接下來呢 我們就可以看到 我們滾動的時候 它就會得到這種交錯的感覺 得到這種交錯的感覺 那原則上呢 我們的程式碼其實已經寫完了 不過呢 其實現在還有一個問題 我們的圖片都是使用 unsplash上面的圖片 那這個圖片呢 我們是隨機載入的 所以如果到 我們的網頁裡面呢 它就有一個狀況 就是當我第一次進來的時候 這圖片其實還沒有載入 我再一次 就是我們重新整理 那如果很快往下的時候 它很多圖片都還沒有載入 所以它會顯得有一些明明就空白 卻還是讓用戶看到 那這個時候我們就會加入 一個載入的效果 那這個載入效果我們可以先這樣做 在這個地方呢 我們也先準備 一個loading的覆蓋 存檔之後 它會直接蓋在上面 就這樣子而已 它就是一個黑黑的底 然後加上白色的字 第二件事情呢 我們可以再做一件事 就是在它載入之前 我們可以加入一個overflow hidden 所以現在完全不能滾 完全不能滾 那我們現在要做的事情就是再加入一個 確認一個載入的一個效果 那會又使用到一個套件 就是image loader 那這個套件呢 使用上還蠻容易的 在這個地方呢 它有提供cdn 我們就先把這個cdn給載進來 它是二折一 兩個跳一個載入就好 我們把這個cdn呢 把它放在上面 先讓它載入 接下來回到最下方 在下面這個地方呢 我們會使用到的是 我們會先取得 所有的元素 這邊 我們會先把所有的圖片元素給取出來 const images ages 然後呢 我們可以直接使用到 gshap的方法 frontiers 剛剛有用過的 裡面呢 有一個to array 我們會去取得所有的圖片 我們取得所有的標籤 那定義好之後呢 我們就可以把 使用剛剛的套件呢 把圖片全部都載進來 載進來之後呢 它纔去觸發我們的滾動效果 所以會使用到剛剛的 images loader 的一個工具 然後呢 在這個地方的話 我們就會去載入 剛剛的所有的圖片 使用on來做觸發 那觸發的 我們會等到 它所有的圖片呢 都載入完之後 去觸發下一件事情 那這裡的話會插入的是 函式 那比較要注意的是 我們這邊 必須使用函式來觸發它 所以會使用到const show 那我們把它定義成函式 接下來呢 把這段程式碼給貼進來 然後接下來呢 我們把show給載進來 好 那存檔之後 回到畫面上 它目前沒有任何變化 我們至少要讓 確定是有觸發 所以在這個地方 show呢 你可以再加一段字 就是show 好 存檔之後 等到它圖片全部載入之後 它就會出現show的字眼 那這第一次載入可能會比較久 好 那現在可以看到 show的字眼出現了 它是等到 所有圖片都載進來之後 才會觸發 好 那接下來呢 我們要把剛剛遮在上面 還有滾動的效果給補回 我們剛剛在畫面上有加上一個loader 的一個黑色的底 白色的字的一個底 我們必須把它移掉 那我們會使用to 就是當它載入之後 做一個轉場 把它轉到 另外一個地方 會加入兩個部分 一個是元素 所以會使用到document 去選擇蓋在上面的loader 好 另外一個 就是說可以套用一個效果 那這個效果呢 同學可以自己選擇自己想套用的 那我們會套用的是透明度 好 那我們把它 把它變成0 這個是第一個效果 當它載入完成之後呢 可以把它套用 這個背景色把它移掉 好 那可以看到它背景色移掉了 那另外一個呢 就是我們滾動 剛才被我們關閉了 所以現在呢 可以再把滾動給補回 所以這裡呢 我們會使用到document 的body 然後在body裡面呢 我們會調整它的樣式 把它改成 原始的auto的狀態 好 那存檔之後再一次 這時候呢 我們可以把這個叉叉 關掉 然後等到它載入完畢 那現在的話 它滾動呢 它就會依序的進場 並且它在滾動的過程中可以看到它圖片 都是完全載入的 這樣就可以避免 往下滾的時候 有些時候會看到這個圖片呢 還沒有載入的狀況 好 那今天呢 我們就介紹G-Shape搭配Scroll Trigger 這種滾動的效果 那如果沒有問題的話 歡迎大家來試試看喔