Logo Marquee

DEMO

CODE

<div class="demo-stage lgm-stage">
  <p class="lgm-hint">ホバーで一時停止</p>
  <div class="lgm-viewport">
    <div class="lgm-track">
      <span class="lgm-logo">NOVA</span>
      <span class="lgm-logo">ATLAS</span>
      <span class="lgm-logo">ORBIT</span>
      <span class="lgm-logo">PIXEL</span>
      <span class="lgm-logo">VERTEX</span>
      <span class="lgm-logo" aria-hidden="true">NOVA</span>
      <span class="lgm-logo" aria-hidden="true">ATLAS</span>
      <span class="lgm-logo" aria-hidden="true">ORBIT</span>
      <span class="lgm-logo" aria-hidden="true">PIXEL</span>
      <span class="lgm-logo" aria-hidden="true">VERTEX</span>
    </div>
  </div>
</div>

.lgm-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; padding:3rem 0; background:#0F0F12; min-height:280px; }
.lgm-hint { color:rgba(255,255,255,.4); font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.75rem; margin:0; }
.lgm-viewport {
  width:min(560px,92%); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12% 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12% 88%, transparent);
}
.lgm-track { display:flex; width:max-content; animation: lgm-scroll 18s linear infinite; }
.lgm-viewport:hover .lgm-track { animation-play-state:paused; }
.lgm-logo {
  flex:none; padding:.9rem 2.2rem; margin-right:.9rem; border-radius:10px;
  background:#15151A; border:1px solid rgba(255,255,255,.10);
  color:#c9c9d1; font-family:'Oswald',sans-serif; font-size:.95rem; letter-spacing:.24em;
}
@keyframes lgm-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

AI PROMPT

導入企業ロゴが途切れず流れ続ける無限ロゴスライダー（ロゴマーキー）をCSSだけで作って。トラック（display:flex; width:max-content）にロゴのリストを2回連続で並べ（2周目は aria-hidden="true"）、animation で transform: translateX(0) → translateX(-50%) を linear 無限ループ。リストがちょうど2連結なので -50% 到達時＝1周目の開始位置と完全に一致し、継ぎ目が見えない。外側ビューポートは overflow: hidden ＋ mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent) で両端をフェード。:hover で animation-play-state: paused にすると読みたい人が止められる。各ロゴは flex: none（縮ませない）が必須。導入実績・提携メディア・スポンサー帯に。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。