下部マーキー付きヒーロー（実績ロゴ流し）
下部マーキー付きヒーローは、メッセージブロックの下に導入企業ロゴが横へ流れ続ける帯（ .hero-mq__track ）を敷いた構成です。流れる部分は white-space:nowrap で一列に並べ、 @keyframes mqScroll が translateX(0) から translateX(-50%)…
解説
下部マーキー付きヒーローは、メッセージブロックの下に導入企業ロゴが横へ流れ続ける帯（.hero-mq__track）を敷いた構成です。流れる部分は white-space:nowrap で一列に並べ、@keyframes mqScroll が translateX(0) から translateX(-50%) へ動かして無限スクロールを作ります。同じロゴ列を 2 回繰り返して並べ、半分まで動いたところでループさせることで継ぎ目のない流れに見せています。JavaScript 不要の CSS アニメーションです。
こんな場面で
- SaaS で導入企業ロゴを並べて信頼感を出すとき
- メディア掲載実績を流したいコーポレートサイト
- パートナー一覧をコンパクトに見せたいとき
流れる速度は animation の 25s を変えると調整できます。値を大きくするとゆっくりに、小さくすると速くなります。ロゴは span 内のテキストや svg を差し替えて使います。常に動き続けるため、prefers-reduced-motion でアニメーションを止める配慮を加えると親切です。実在しない企業名を載せると誤解を招くので、掲載許可のあるロゴだけを使ってください。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
ロゴが流れる速さを変えるには？
.hero-mq__track span の animation で指定している 25s の値を変えます。秒数を大きくするとゆっくり、小さくすると速く流れます。
途中で流れが途切れて見えるのを防ぐには？
同じロゴの並びを2回繰り返して入れ、アニメーションを translateX(-50%) で止めるのがコツです。1セット分だけだと半分でリセットされ、空白や継ぎ目が見えてしまいます。