(14)前端好好玩用 GSAP 做一個特效 - 跑馬燈

前言

那麼前面章節我們已經掌握了許多基本的 GSAP 觀念與語法，接下來呢？接下來當然來簡單實作一個動畫，這樣子才能夠將前面所學的知識整合。

跑馬燈特效

首先我們先來做一個最簡單的效果，也就是跑馬燈。

那麼一開始我們要先來製作基本的網頁架構，通常跑馬燈都會是一大串的文字，然後不停的在網頁上來回跑，所以這個網頁上可能會有這一段文字

1
2
3
4
5
6
7

<hr class="my-3"/>

<p id="text" class="p-[50px]">
  這是一段文字，這是一個 GSAP 跑馬燈範例
</p>

<hr class="my-3"/>

接著就是使用 gsap 來去選取那一段文字，並且跑向左邊，那麼這邊我有先設置好一個 id 叫做 text 以方便你可以選取它

1
2
3

gsap.to('#text', {
 //... 略
})

那麼你還記得如果我們想往左邊跑到底的話該怎麼寫嗎？這邊你可以試著思考一下………
……
…..
….
…
..
.

好了，我們來看看答案吧，我們可以這樣寫

1
2
3

gsap.to('#text', {
 x: -1000,
})

但你會發現一下子就消失了，所以我們要給這個動畫一個 duration，讓它可以有一個時間去跑完

1
2
3
4

gsap.to('#text', {
 x: -1000,
 duration: 10,
})

接著我們要讓它可以無限循環，所以我們可以這樣寫

1
2
3
4
5

gsap.to('#text', {
 x: -1000,
 duration: 10,
 repeat: -1,
})

有趣的事情發生了，雖然動畫確實是重來了沒錯，但是它沒有一個連貫性的感覺，那這要怎麼解決呢？其實非常簡單，就是給它一個超級無敵多文字，除此之外結構也要稍微一下

1
2
3
4
5
6
7
8
9
10

<hr class="my-3"/>

<div class="m-[50px] overflow-hidden">
  <p id="text" class="whitespace-nowrap">
    這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例
  </p>
</div>


<hr class="my-3"/>

那麼外層使用了一個 overflow-hidden 並將文字強制不換行，這樣子才能夠有一點跑馬燈感覺，接著你就可以看到一個跑馬燈效果囉

但你會發現當 GSAP 跑到 x 結尾後都會停一下，這是因為我們沒有設定 ease，所以我們要給它一個 ease，這樣子就會有一個連貫性的感覺

1
2
3
4
5
6

gsap.to('#text', {
 x: -1000,
 duration: 5,
 repeat: -1,
 ease: 'none',
})

當然這範例並沒有非常完美，因為還是要留點東西給你自己做囉~

那麼這一篇就到這邊哩。