無限スクロール ロゴ列
無限スクロール ロゴ列は、ロゴやブランド名が 横へ途切れなく流れ続ける マーキー表現です。このサンプルは同じ並びを2セット用意し、 animation:mq 18s linear infinite でトラック全体を translateX(-50%) までスライドさせます。
解説
無限スクロール ロゴ列は、ロゴやブランド名が横へ途切れなく流れ続けるマーキー表現です。このサンプルは同じ並びを2セット用意し、animation:mq 18s linear infinite でトラック全体を translateX(-50%) までスライドさせます。ちょうど半分まで進むと最初のセットと2セット目が入れ替わって見えるため、繋ぎ目を感じさせず無限ループになります。両端は mask-image のグラデーションで透明にフェードさせ、唐突に切れない上品な見た目です。
使う場面
- 導入企業・取引先のロゴ帯
- トップページの「ご利用ブランド」セクション
- 受賞・掲載メディアの一覧表示
流れる速さは 18s の数値で調整でき、大きくするほどゆっくりになります。ロゴの間隔は gap:48px で管理します。重要な注意点として、表示する要素は必ず2セット分を複製してください。1セットだと折り返しで空白ができます。linear の等速指定によりカクつきなく流れます。動きを止めたいユーザー向けに prefers-reduced-motion でアニメーションを停止し、静止したロゴ帯にフォールバックする配慮を加えると親切です。
使用例・適したシーン
- 導入企業ロゴ流し
- キャッチコピー帯
- フッター直前装飾
よくある質問
流れる速度はどこで調整しますか
animationのduration（18s）を変更します。数値を大きくするとゆっくり、小さくすると速く流れます。等速で動かすためにlinearを指定しているので、途中で加減速せず一定の速さを保てます。
なぜロゴを2セット並べているのですか
途切れない無限ループにするためです。全体を半分（translateXの-50%）までスライドさせたとき、後半のセットが前半と同じ見え方になり、繋ぎ目なくつながります。1セットだけだと折り返しで空白ができてしまいます。