無限スクロール ロゴ列

解説

クライアント企業のロゴが横へ途切れなく流れていく、導入実績セクション定番の演出です。同じロゴ列を2セット並べ、片方が画面外へ抜けたタイミングでもう片方が続くため、繋ぎ目を感じさせない無限スクロールになっています。

JavaScript は不要で、CSS の @keyframes が translateX を使って列全体を半分ぶん左へ動かし続けるだけです。左右の端は mask-image のグラデーションでふわっと透明になり、ロゴが急に切れて見える違和感を防いでいます。overflow:hidden で枠からはみ出した部分を隠している点もポイントです。

向く場面と調整

• 「導入企業」「メディア掲載」などの実績紹介
• 提携ブランドやスポンサーの一覧
• アイコンや受賞ロゴの流し見せ

流れる速さは mq__row の 20秒を変えるだけで調整でき、数値を大きくするとゆっくりになります。実際にはテキストの代わりに画像ロゴを入れて使います。動きを抑えたい利用者のために、prefers-reduced-motion でアニメーションを止める配慮も入れておくと親切です。ロゴは必ず2セットぶん並べるのが滑らかにループさせるコツです。

使用例・適したシーン

• 導入企業ロゴ流し
• キャッチコピー帯
• フッター直前装飾