CSS ANIMATION / CONTINUOUS LOOP

CSS Marquee & Ticker Studio.

12プリセットから、流れる文字とロゴの帯を作る。

MARQUEE & TICKER WORKSPACE

内容と流れ方を調整する

12のプリセットを見る ↓
内容・設定 ↓CSS ONLY LOOP
確認用の幅は出力CSSに含めません

COPY & USE

流れる帯を、自分のページに使う

同じ内容を2組並べるHTMLが必要です。HTMLサンプルには現在の内容・CSS・停止用のチェックボックスを含めます。読み込んだロゴも画像として埋め込みます。

表示と出力は同じCSS

12 LOOP PRESETS

使いたい帯から選ぶ

見本は静止表示。ホバーまたはフォーカスで再生します。

12 presets

HOW IT WORKS

同じ内容をつなぎ、1組分だけ動かす

2組の幅を揃える

項目間のgapと、最後の余白を1組に含めます。同じ2組を並べるので、間隔を変更しても次の組へつながります。

CSSで1組分を移動する

各組をtranslateX(-100%)またはtranslateY(-100%)で移動します。編集と生成にはJSを使いますが、保存HTMLのループと停止操作はCSSだけで動きます。

止めて読める状態を残す

停止用のチェックボックスを付け、複製した組は読み上げ対象から外します。動きを抑える設定ではループを止め、元の項目を一覧にします。

時間と移動速度：指定するのは1組が一周する時間です。文字・ロゴ・項目数・幅によって1組の長さが変わるため、同じ秒数でも移動速度は変わります。

縦ニュース：「1件ずつ」はsteps()で瞬時に切り替える方式です。長い見出しは1行で省略表示します。動きを抑える設定では省略せず一覧表示します。

組み込み時：サンプルの名称・ロゴ・ニュースは表示確認用です。利用先の内容に置き換えてください。複数の設定を同じページで使う場合は、設定ごとにクラス名を分けてください。停止操作は残すことをおすすめします。

参考：animation ↗animation-play-state ↗transform ↗prefers-reduced-motion ↗