LED 跑馬燈是一種移動文字橫幅,會讓一則簡短訊息沿著明亮的軌道循環顯示,並可透過固定速度預設、可反轉方向及一組小型文字尺寸來控制。在瀏覽器式 LED 跑馬燈中,移動橫幅是由大型等寬文字構成,並以樣式呈現出 LED 顯示器的外觀,而非模擬特定硬體電子元件。動畫完全在目前的瀏覽器分頁中透過 CSS 關鍵影格執行,因此在你調整文字或觀看預覽時,不會有任何訊息被上傳、儲存、翻譯或傳送至伺服器。控制項刻意設得很精簡:一行短文字、3 種速度預設、2 種方向,以及 5 種固定文字尺寸。這種精簡是特色而非限制,因為每個設定都會改變看得見且可預期的效果。本指南會說明各控制項的作用、為何訊息長度與字型大小會影響看似移動的速度、字元的定義,以及瀏覽器式 LED 跑馬燈何時是合適選擇,而不是使用專門製作招牌的軟體。

led scroller explained
LED 跑馬燈解析:控制項、速度與限制

LED 跑馬燈的定義

LED 跑馬燈會顯示一行短文字,讓它沿著框架水平移動,並在動畫執行期間持續重複顯示。顯示內容由大型等寬瀏覽器文字構成,採用較大的字元間距與俐落的捲動軌道,呈現 LED 顯示器的外觀,但不會模仿特定的點陣面板、更新率或像素間距。此短語刻意設計為單行,因此控制項僅支援一則訊息,而不提供多行版面配置工具。這項限制可讓預覽在任何瀏覽器寬度下都維持可預期的表現。

這類 LED 風格橫幅通常用於手持式快速招牌、活動提示、桌面訊息、簡報提示、拍照道具及簡短注意力提示。瀏覽器版本可直接滿足這些用途,不必另外準備顯示器、控制裝置或製作招牌的應用程式。由於移動文字是真正由瀏覽器即時算繪的文字,而非錄製的影片,因此你對訊息、速度、方向或大小所做的每項變更,都會清除現有預覽,讓可見橫幅不會在未提示的情況下與控制項不一致;而按下 Start 時,系統會在顯示新動畫前重新驗證完整設定。其結果呈現為快速的 LED 風格動畫,而非任何特定硬體產品的模擬。

瀏覽器 LED 跑馬燈與硬體招牌的差異

瀏覽器 LED 跑馬燈是經過樣式設定的預覽,而不是實體面板的控制裝置。它採用大型等寬瀏覽器文字、較大的字元間距及網站色彩權杖,而不會重現特定名稱的點陣字型、電子更新率、像素間距、亮度等級、實體招牌控制器或製造商通訊協定。算繪後的外形取決於瀏覽器中安裝的字型,因此同一則訊息在不同裝置上可能略有差異,這對於未使用固定硬體字型算繪的文字而言屬正常現象。

由於預覽由 CSS 驅動,看似移動的速率會隨訊息寬度、選用的字型大小、瀏覽器寬度及縮放等級而變動,但底層循環持續時間維持固定。若你需要精確的招牌尺寸、認證亮度、遠端排程或硬體輸出,請使用該實體顯示器隨附的軟體。其他所有需求都能由瀏覽器版本回答一個實用問題:短句以所選速度與大小呈現時是否清楚易讀,然後你再決定是否投入製作。

如何在瀏覽器中建立捲動橫幅

若要製作可運作的捲動橫幅,請依序使用各控制項。LED Scroller 每次按下 Start 時都會驗證完整設定,因此在你計畫使用的實際螢幕上檢視完整循環,是流程的一部分。

  1. 在文字欄位中輸入一則簡短訊息。請將其維持在可容納於單行的短語範圍內;前後空白會自動移除,而換行符號、控制字元及 Unicode 行分隔符或段落分隔符都會被拒絕,因為橫幅僅有一行。
  2. 選擇速度預設:慢速(每次循環 12 秒)、中速(每次循環 8 秒)或快速(每次循環 4 秒)。請將預設視為固定的 CSS 持續時間,而非經過校準的實體速度。
  3. 選擇方向。由右至左會讓橫幅從右側開始並朝左移動,這是英文文字最常見的閱讀方向。由左至右則反轉該動作,適用於對稱版面、鏡像場景或非拉丁文字。
  4. 從固定選項中設定文字大小:32、48、64、80 或 96 CSS 像素。尺寸選項刻意設為有限制,讓控制項維持可預期,並避免頁面在極值下破裂。
  5. 按下 Start scrolling。控制項會驗證完整設定、儲存一個不可變的設定物件,並增加算繪修訂版本,讓可見橫幅始終與控制項一致。
  6. 在實際螢幕上至少觀看一次完整循環。確認訊息以所選速度呈現時清楚易讀,然後可使用 Pause 顯示靜止訊息、Resume 繼續播放,或 Restart 讓循環從初始位置重新開始。

預覽執行期間若編輯任何輸入內容,便會清除舊預覽,讓可見橫幅不會在未提示的情況下與控制項不一致。重新開始時,系統會在顯示新動畫前再次執行完整驗證。整個流程旨在防止拼字錯誤或意外分隔符產生偏離原始輸入內容的橫幅。

速度預設、方向與文字大小

LED Scroller 提供的是一組小型固定數值,而非無限制的滑桿。維持可預期的選項可確保每個預覽的行為一致,也避免頁面在極大或極小字型尺寸,以及零秒循環時發生問題。

設定可用數值控制內容
速度慢速(12s)、中速(8s)、快速(4s)完整的 CSS 1 次循環,並無限重複
方向由右至左、由左至右文字沿框架移動的方向
文字大小32、48、64、80 或 96 CSS 像素移動文字的固定高度
訊息長度最多 120 個 Unicode 碼位可接受的訊息長度上限

3 個速度標籤是介面中透明的預設值,並非以像素/秒表示的速度聲明。看似移動的速率會隨訊息寬度、選用的字型大小、瀏覽器寬度及縮放而變動,因此,即使選擇相同預設,窄螢幕上以小尺寸顯示的短訊息,看起來仍會比寬螢幕上以 96 CSS 像素顯示的長訊息更慢。這就是為何此工具要求你透過觀看實際預覽來選擇預設,而不是將其視為經過校準的實體速度。對於非拉丁文字及表情符號,單一表情符號算作 1 個碼位,而非 2 個 UTF-16 單元,因此 120 個字元的額度能一致地適用於各種文字系統。

訊息限制與工具拒絕的內容

驗證會在任何動畫開始前進行,而這些規則刻意設得很精簡。訊息最多可包含 120 個 Unicode 碼位,這對橫幅短語而言相當足夠,同時也能限制長度,讓可見軌道維持易讀。前後空白會被去除。控制字元、換行符號及 Unicode 行分隔符或段落分隔符都會被拒絕,因為這是單行橫幅,而看不見的分隔符可能造成令人困惑的輸出,結果在螢幕上看似正確,卻與你輸入的內容不符。

表情符號、帶重音字母、標點符號及非拉丁文字都會以碼位計算,而非原始 UTF-16 單元,因此單一表情符號不會被錯誤計為 2 個。此工具不會縮短超出限制的訊息、替換不支援的文字、轉換大小寫、修正拼字、翻譯或插入裝飾符號。如果你的文字未經修改便返回,表示已通過驗證;如果某個控制項拒絕輸入,表單會讓你返回編輯,而不會產生隱藏問題的破損預覽。

暫停、繼續、重新開始與減少動態效果

有 3 個控制項負責管理動態本身。Pause 會切換 CSS 動畫的播放狀態,凍結目前影格;Resume 會從該影格繼續相同的動作;Restart 則會建立全新的動畫實例,並讓它回到開頭。這些控制項都不會在背景啟動計時器循環、requestAnimationFrame worker、canvas繪製循環或伺服器程序,因此關閉分頁就會停止所有作業。

樣式表也會遵循瀏覽器的 prefers-reduced-motion 設定。如果你的作業系統或瀏覽器要求減少動態效果,橫幅就會強制維持暫停狀態;訊息仍可作為靜止招牌閱讀,而且每個控制項依然都能使用。這項安全機制可避免網站偏好設定意外覆蓋裝置提出的無障礙需求。Pause 適合任何需要仔細轉錄的內容:姓名、代碼、地址、電話號碼、指示,或任何觀眾必須抄寫的資訊。請讓重要安全資訊保持靜止且清楚可見;移動的裝飾性橫幅不應是緊急警示、無障礙通知、交通方向或其他高風險訊息唯一的傳遞管道。

瀏覽器 LED 跑馬燈何時是合適工具

當你想快速進行視覺呈現,卻不想安裝應用程式時,LED Scroller 最為實用。實用用途包括活動中的手持式快速招牌、給同事看的桌面訊息、提醒聽眾回到主題的簡報提示、社交貼文的拍照道具,以及在無須使用完整招牌製作應用程式時提供視覺注意力提示。預覽僅存在於你的分頁中,不需要帳號,因此你很容易試用短語、判斷速度,並改用其他內容。

它無法取代實體招牌、硬體控制器、認證亮度、精確像素尺寸或遠端排程,預覽也無法輸出至面板。若想在不使用全螢幕提示的情況下取得更大顯示區域,可增加文字大小、使用瀏覽器的一般全螢幕指令,或透過受信任的系統控制功能鏡射瀏覽器視窗。若要獲得最清晰的結果,請使用對比鮮明的短語,避免密集的標點符號,並確認每位需要接收訊息的人都能在所選速度與距離下閱讀內容。此控制項完全在目前的瀏覽器分頁中執行,不需要帳號、不會產生檔案,也絕不會上傳或儲存你輸入的內容。

若你正在比較不同選項,LED Scroller for Beginners: Make a Moving Banner 會有更詳細的說明。

若你正在比較不同選項,LED Scroller Free, No Sign-Up: Private Browser Preview 會有更詳細的說明。