跑馬燈特效以 GSAP 實作
Ray 的範例
前面的程式碼說明簡單先略過，主要到不中斷的迴圈動畫，設定如下。
1 2 3 4 5 | gsap.to('#text', { x: -1000, duration: 10, repeat: -1, }) |
增加 ease: 'none', 設定，讓不斷重覆的動畫不會在結尾處重頭開始時，有中斷的感覺。
1 2 3 4 5 6 | gsap.to('#text', { x: -1000, duration: 5, repeat: -1, ease: 'none', }) |
理解原理後，多加上滑入滑出事件，結合 GSAP 動畫暫停與播放
1 2 3 4 5 6 7 | <hr class="my-3" /> <div class="out px-[1rem] py-[20px] overflow-hidden"> <p id="text" class="whitespace-nowrap"> 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例. 這是一段文字，這是一個 GSAP 跑馬燈範例 </p> </div> <hr class="my-3" /> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | const textEL = document.querySelector("#text"); const textOutsideEL = document.querySelector(".out"); const linksData = [ { url: "https://www.google.com/", name: "Google", }, { url: "https://tw.yahoo.com/", name: "Yahoo", }, { url: "https://www.mobile01.com/", name: "Mobile 01", }, { url: "https://www.facebook.com/", name: "Facebook", }, ]; let textELStrTemp = ""; for (let i = 0; i < linksData.length; i++) { textELStrTemp += ` <a class="hover:text-blue-700" href="${linksData[i].url}" target="_blank" rel="noopener noreferrer"> ${linksData[i].name} </a> 、 `; } // 資料長度太短，所有的 HTMLTemplate 字串重覆 5 次結構 for (let l = 0; l < 5; l++) { textELStrTemp += textELStrTemp; } textEL.innerHTML = textELStrTemp; const gsapText = gsap.to(textEL, { x: -1000, duration: 30, repeat: -1, ease: "none", }); textEL.addEventListener("mouseenter", function (e) { // 感應的是 P 標籤裡的文字，單一文字所感應的地方會與後方的元素有發泡事件，單純請此元件處理動畫暫停 if (e.target.tagName === "P") { console.log("enter"); gsapText.pause(); } }); textOutsideEL.addEventListener("mouseover", function (e) { if (e.target.tagName === "DIV") { console.log("over"); gsapText.play(); } }); |
這裡以 codePen 呈現結果。
See the Pen GSAP – 41 by Jimmy_Wu (@Jimmy_Wu) on CodePen.