ロゴ無限スクロール
「ロゴ無限スクロール」は、導入企業やパートナーのロゴを横方向へ自動で流し続けるパーツです。実装は CSS アニメーションだけで完結しており、JavaScript は使いません。 display:flex でロゴを横一列に並べ、 animation で translateX(-50%) まで動かすことで、同じ並びを…
このパーツの使いどころと実装ポイント
「ロゴ無限スクロール」は、導入企業やパートナーのロゴを横方向へ自動で流し続けるパーツです。実装は CSS アニメーションだけで完結しており、JavaScript は使いません。display:flex でロゴを横一列に並べ、animation で translateX(-50%) まで動かすことで、同じ並びを 2 セット用意すれば継ぎ目なくループします。左右の端は mask-image のグラデーションで自然にフェードさせ、唐突な切れ目を消しています。
向いている場面
取引先が多い BtoB のコーポレートサイト、SaaS の「ご利用企業」セクション、メディア掲載実績の紹介などに向きます。1 社ずつ静止して並べるより、流すことで「数の多さ」と「動きのある信頼感」を一度に伝えられます。
カスタマイズと注意点
- 本物のロゴ画像に差し替える場合は、文字の
spanをimgに置き換え、高さを揃えると整って見えます。 - 速度は
animationの秒数（初期値 16 秒）で調整します。ロゴ数を増やしたら 2 セットとも同じ内容にするのがループ成立の条件です。 - 動きが苦手な利用者に配慮し、
prefers-reduced-motionでアニメーションを止める指定を足すとアクセシビリティが上がります。
よくある質問
ロゴが途中で途切れて見えるのを防ぐには？
同じロゴ列を2セット並べて、アニメーションの移動量を全体幅の半分（-50%）にするのがコツです。1セットだけだと末尾で空白ができて途切れて見えます。
ロゴの流れる速さは変えられますか？
CSSのanimationに指定した秒数を変えるだけで調整できます。数字を大きくするとゆっくり、小さくすると速く流れます。ロゴ数を増やしたときは少し遅めにすると見やすくなります。