スクロール文字ジェネレーター
横または縦にスクロールする文字を作り、動きを確認してコピーできるHTML/CSSを書き出します。
テキストと設定
方向
出力
入力またはサンプルを待っています。
プレビュー
プレビューを表示できなくても、下のHTML/CSSはコピーできます。
- テキスト行数
- 0
- 1ループの秒数
- 0
- 文字サイズ
- 0
- 内側余白
- 0
詳しく見る
使い方
文字を入力し、方向と表示スタイルを選んで動きを確認してからHTML/CSSをコピーまたはダウンロードします。
仕組みと範囲
プレビューに入れる前に文字をエスケープし、書き出すCSSではtranslateXまたはtranslateYとprefers-reduced-motionの代替動作を使います。
よくある質問
文字を速く動かすにはどうしますか？
1ループの時間を短くします。時間は1回の移動にかかる秒数です。
複数行の文字を縦にスクロールできますか？
はい。上または下を選ぶと、複数行が1つのコンテンツブロックとして一緒に動きます。
動きを減らす設定を有効にするとどうなりますか？
プレビューと書き出しコードにはprefers-reduced-motionの代替動作があり、要求時は連続移動を停止します。
プライバシーと参考情報
テキストはこのブラウザー内で処理され、アップロードされません。
重要な情報をスクロール文字だけで示さないでください。静的な代替表示を用意し、動きを減らす設定を尊重します。