(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',
})

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

那麼這一篇就到這邊哩。

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ