在瀏覽器中製作會移動的 LED 風格文字,指的是把一小段文字,變成一條會沿著設定軌道移動的大型重複跑馬燈,靠的是 CSS 動畫,而不是實體硬體。這個效果的做法,是把一整行等寬字型的文字,以線性、無限重複的方式,朝選定的方向平移,使用者可以控制每一個關鍵變數:訊息本身、循環速度、移動方向,以及字型大小。三個具名的預設值(慢速、中速、快速)分別對應到 12、8、4 秒的固定 CSS 循環時長,而一組介於 32 到 96 CSS 像素之間、共五個固定選項的文字大小範圍,讓介面保持可預期,同時避免可能弄壞頁面的極端數值。由於一切都在目前的瀏覽器分頁中執行,這個預覽功能可以在最終要顯示訊息的同一個螢幕上測試,這是確認一個移動跑馬燈在選定速度與距離下是否清晰可讀的最可靠方式。

how to move led lights
how to move led lights

為什麼瀏覽器預覽比硬體更適合快速製作移動訊息

在真正投入實體 LED 面板、影片檔案,或另一個應用程式中的版面配置之前,瀏覽器預覽是確認一則移動訊息實際效果最快的方式。呈現出來的形狀,完全取決於瀏覽器可用的字型、選定的文字大小、可視區域寬度,以及裝置的縮放層級,因此在觀眾實際觀看的同一個螢幕上檢查跑馬燈,能去除大部分的猜測。相對地,實體 LED 硬體會帶入諸如像素間距、認證亮度、更新率,以及製造商專屬控制器協定等校正變數,而這些都不是瀏覽器預覽功能需要重現的東西。

在只需要透過移動來傳達一句短語的場合——例如快速製作的手持標語、活動提示、桌面訊息、簡報提詞、拍照道具,或視覺注意力訊號——通常不需要一整套完整的標語製作應用程式。LED 跑馬燈產生器正好填補了這個空缺,提供一組聚焦的控制項、一條乾淨的捲動軌道,以及本站自有的色彩代碼,因此使用者只需要考慮訊息內容、速度、方向,以及大小這幾項輸入。

三步驟設定會移動的 LED 風格跑馬燈

這是製作一個移動跑馬燈的核心流程。每一步都直接對應到 LED 跑馬燈產生器上的一項控制項。

  1. 輸入一則簡短訊息,然後選擇它的循環速度、移動方向,以及大型文字大小。 訊息欄位在去除外側多餘空白後,最多接受 120 個 Unicode 碼位。控制字元以及 Unicode 換行或段落分隔符號會被拒絕,因為看不見的分隔符號可能會弄壞單行跑馬燈。表情符號、帶重音的字母、標點符號,以及非拉丁文字,每一個都計為單一字元,因此單一個表情符號不會被誤算成兩個字元。慢速、中速或快速控制的是循環時長;由左至右或由右至左控制的是移動方向;而一組介於 32 到 96 CSS 像素之間、共五種固定字型大小的選項,則控制了視覺上的大小。
  2. 啟動預覽,並看完一次完整的循環,確認訊息在目前螢幕上清晰可讀。 按下啟動控制項,會驗證目前完整的設定,並讓算繪版本號遞增,藉此建立一個全新的動畫實例。請看著跑馬燈從頭到尾走完一整條軌道,而不要只看不到一秒鐘就判斷速度,因為視覺上的移動速率,會隨著訊息寬度、選定的字型大小、瀏覽器寬度、縮放層級,以及裝置而改變。為了得到最清晰的效果,請使用一句簡短、對比強烈的短語,並避免密集的標點符號。若想深入了解動態設定本身,請參閱在 LED 風格跑馬燈上移動文字的指南
  3. 暫停成為靜止標語、繼續同樣的動態,或從初始位置重新開始動畫。 「暫停」會透過切換 CSS 動畫的播放狀態,凍結目前的畫面;「繼續」會延續同樣的動態;「重新開始」則會讓算繪版本號遞增,讓動畫從起始位置重新開始。當內容是姓名、代碼、地址,或需要仔細抄寫的說明時,「暫停」是正確的選擇。

一覽速度預設值、方向與大小

控制項的數量刻意保持精簡,讓預覽結果永遠可預期。下表整理了三個速度預設值官方定義的數值;其他一切因素(字型、可視區域、縮放層級、訊息寬度),只會影響視覺上的移動速率,不會影響底層的循環時長。

預設值循環時長最適合的情境
慢速每次循環 12 秒較長的短語、需要從較遠距離閱讀的觀眾,以及活動中需要吸睛的展示
中速每次循環 8 秒一般訊息,這種節奏比吸睛速度更重視平衡
快速每次循環 4 秒需要快速循環、不需要停留吸引注意力的簡短文字或代碼

方向描述的是文字移動的去向,而不是它從哪一側開始。由右至左會讓跑馬燈從右側開始,並將它帶往左側,這也是英文以及大多數拉丁文字語言慣用的閱讀方向。由左至右則會反轉這個動態。五種固定的字型大小——32、48、64、80 與 96 CSS 像素——讓控制項保持可預期,並防止極端數值弄壞頁面。不支援選擇超出這個範圍的大小,因為這個介面是刻意受限的。三個速度標籤是透明的介面預設值,而不是以像素每秒表示的宣稱,因此應該透過觀察實際預覽來選擇預設值,而不是把它當成經過校準的實體速度。

安全地閱讀一則移動訊息

捲動式跑馬燈是一種裝飾性或吸引注意力用的格式,不是傳遞高後果資訊的可靠管道。請讓關鍵的安全指示保持靜止且清楚可見;一個會移動的裝飾性跑馬燈,不應該是緊急警告、無障礙告示、交通指示,或其他高後果訊息的唯一管道。每當訊息內容包含觀看者需要仔細抄寫的姓名、代碼、地址,或說明時,請暫停跑馬燈,因為動態會讓逐字閱讀比閱讀靜止標語明顯更困難。

這個頁面也會遵循瀏覽器的「減少動態」(prefers-reduced-motion)設定,對於在作業系統層級已要求減少動態的使用者,會強制讓跑馬燈保持暫停狀態。這項防護機制可避免站台本身的偏好設定,意外覆蓋掉使用者的無障礙需求。訊息仍會以靜止跑馬燈的形式保持可讀,且每一項控制項都照常運作,因此對動態敏感的觀看者,不會被排除在內容之外。在真正的活動中依賴這個移動格式之前,請確認每一位需要看到訊息的人,都能在選定的速度與距離下讀懂它。

隱私與本機瀏覽器處理

一切都在目前的瀏覽器分頁中進行。驗證會在去除外側一般空白之前,先針對原始訊息執行,接著會拒絕空白文字,以及任何超過 120 個 Unicode 碼位的輸入;動畫是一段 CSS 關鍵影格,會以線性、無限重複的方式,平移一整行等寬字型文字;而暫停、繼續與重新開始,則是 CSS 動畫播放狀態與算繪版本號的變更。沒有任何畫布、計時迴圈、requestAnimationFrame 工作程序,或伺服器端行程會在背景中持續執行,這個小工具也不會上傳、儲存、翻譯,或分析這則訊息。

這對幾種常見情境很重要:在共用螢幕上測試一則包含機密代碼的跑馬燈、在向任何人展示之前先預覽一則個人訊息,以及檢查一句包含姓名或地址的短語,而不必把這段文字傳送給廣告或 AI 服務。這裡也沒有帳號要求、不會產生檔案,也不會要求全螢幕權限,因為瀏覽器的全螢幕提示各家不同,可能在沒有直接手勢操作的情況下被封鎖,也可能遮住重要的控制項。若想要更大的畫面,可以放大文字大小、視需要使用瀏覽器本身的全螢幕指令,或透過受信任的系統控制項來鏡射瀏覽器視窗。

什麼時候不該用移動的瀏覽器跑馬燈

當需要精確的標語尺寸、認證亮度、遠端排程,或硬體匯出功能時,瀏覽器預覽無法取代硬體。在這些情況下,請改用該顯示裝置所附的軟體,因為任何以瀏覽器為基礎的小工具,都無法重現具名點陣字型、電力更新率、特定像素間距、經過校準的亮度層級、實體標語控制器,或製造商協定。LED 跑馬燈產生器對這個界線刻意保持誠實:這個預覽是 LED 風格,而不是特定硬體面板的模擬,速度標籤也是透明的介面預設值,而不是每秒像素數的量測值。

編輯任何輸入內容,都會清除舊的預覽,讓畫面上的跑馬燈永遠不會悄悄與控制項的設定不一致,而重新開始會在新的動畫出現之前,先驗證目前完整的設定。若這個預覽不符合最終交付所需,正確的下一步,是改用該顯示裝置廠商的製作工具,因為瀏覽器預覽的任務,是在真正投入之前,先確認訊息內容與節奏。

延伸閱讀:如何在瀏覽器中讓文字像 LED 電視一樣移動