パーツ番号 06-01-07 ・ CSSのみ

ロゴ流し(導入企業マーキー)

企業名ロゴが無限に横スクロール。信頼感を演出する「導入企業」「取引先」セクションを画像なしで実装できます。

scrollautocss

プレビュー

ソースコード

HTML

<div class="d06-01-07-wrap">
          <p class="d06-01-07-label">導入企業</p>
          <div class="d06-01-07-marquee">
            <div class="d06-01-07-lane">
              <span class="d06-01-07-logo">NIPPON<b>CORP</b></span>
              <span class="d06-01-07-logo">Sakura Tech</span>
              <span class="d06-01-07-logo">MIDORI<b>DESIGN</b></span>
              <span class="d06-01-07-logo">Aoba Works</span>
              <span class="d06-01-07-logo">FUJI<b>SYSTEMS</b></span>
              <span class="d06-01-07-logo">Hikari Lab</span>
            </div>
            <div class="d06-01-07-lane" aria-hidden="true">
              <span class="d06-01-07-logo">NIPPON<b>CORP</b></span>
              <span class="d06-01-07-logo">Sakura Tech</span>
              <span class="d06-01-07-logo">MIDORI<b>DESIGN</b></span>
              <span class="d06-01-07-logo">Aoba Works</span>
              <span class="d06-01-07-logo">FUJI<b>SYSTEMS</b></span>
              <span class="d06-01-07-logo">Hikari Lab</span>
            </div>
          </div>
        </div>

CSS

.d06-01-07{background:#fff;flex-direction:column}
        .d06-01-07-wrap{width:100%}
        .d06-01-07-label{text-align:center;color:#94a3b8;font-size:11px;letter-spacing:3px;margin:0 0 16px}
        .d06-01-07-marquee{display:flex;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
        .d06-01-07-lane{display:flex;flex:0 0 auto;gap:14px;padding-right:14px;animation:d147scroll 16s linear infinite}
        @keyframes d147scroll{to{transform:translateX(-100%)}}
        .d06-01-07-marquee:hover .d06-01-07-lane{animation-play-state:paused}
        .d06-01-07-logo{flex:0 0 auto;padding:12px 20px;border:1.5px solid #e2e8f0;border-radius:10px;color:#475569;font-weight:700;font-size:14px;letter-spacing:.5px;background:#f8fafc;white-space:nowrap}
        .d06-01-07-logo b{color:#6366f1}

クラス名 .d06-01-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。