無限ループマーキー（ロゴバナー風）
このスニペットは、ロゴやキャッチコピーを途切れなく横へ流し続ける 無限ループマーキー です。JavaScript は使わず、 @keyframes で translateX(0) から translateX(-50%) まで動かすだけで実装しています。
解説
このスニペットは、ロゴやキャッチコピーを途切れなく横へ流し続ける無限ループマーキーです。JavaScript は使わず、@keyframes で translateX(0) から translateX(-50%) まで動かすだけで実装しています。トラック内に同じ要素列を2セット並べ、半分ぶん動いた瞬間に元の位置と見た目が一致するため、繰り返しても継ぎ目が出ずに延々とスクロールしているように見えます。overflow:hidden で枠外をはみ出さないようにしているのもポイントです。
使う場面
- 取引先やパートナーのロゴを一覧で見せる導入セクション
- サービスの特徴やキャッチコピーを流すアテンション帯
- セール告知やお知らせを目立たせるヘッダー直下のバナー
スピードは animation の秒数（このコードでは22秒）で調整でき、数字を大きくするほどゆっくり流れます。流す内容を増減したら、必ず2セットの中身を同じに保ってください。回転や点滅と違い目に負担は少ない演出ですが、動きを止めたいユーザー向けに prefers-reduced-motion でアニメーションを停止する配慮を入れると親切です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
スクロールの速度はどう変えますか？
marquee__track の animation で指定している秒数（このコードでは22s）を変更します。数字を大きくすると遅く、小さくすると速くなります。レイアウトや文字量を変えたときは見た目で速度を再調整してください。
JavaScript は必要ですか？
不要です。CSS の @keyframes とtransform だけで動くため、HTML と CSS を貼るだけで動作します。ただし継ぎ目をなくすには、同じ内容のセットを2つ並べて translateX を -50% まで動かす構成を保つ必要があります。