インフィニットマーキーカルーセル

パートナー企業のロゴ一覧などをループ表示するのによく使われる、無限スクロールアニメーションです。

プレビュー (Preview)

LOGO 1LOGO 2LOGO 3LOGO 4LOGO 5

ユースケースと特徴 (Use Cases & Features)

パブリックリレーション: スポンサーや提携企業のロゴ一覧を途切れることなく表示し、信頼性をアピールします。
視覚的なにぎやかし: キャンペーン情報や新着情報を文字でスクロールさせ、ユーザーの目を惹きつけます。
無限ループ: コンテンツを複製して配置し、CSSアニメーションで継ぎ目なくループさせることで、永遠にスクロールしているように見せます。

デザインとUXのポイント (Design & UX)

スムーズなスクロール: CSSの animation を用いることで、JavaScriptよりも滑らかでパフォーマンスの良いスクロールを実現しています。
ホバー時の一時停止: ユーザーが内容をじっくり見たい場合に備え、マウスホバーでアニメーションを一時停止 (animation-play-state: paused) するようにしています。

カスタマイズ方法 (Customization Guide)

速度の調整: CSSの animation: marquee 20s linear infinite; の 20s を増減させることで、スクロール速度を変更できます。
コンテンツの変更: ロゴやテキストの要素を自由に入れ替えることができます。必ず2つのセット（オリジナルと複製）の中身を同じにしてください。

実装コード (Implementation)

<div class="w-full overflow-hidden bg-white dark:bg-zinc-950 py-10">
<style>
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
  .animate-marquee:hover {
    animation-play-state: paused;
  }
</style>
<div class="flex w-[200%] animate-marquee gap-8 items-center">
  <!-- First set -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
  <!-- Duplicate set for infinite effect -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
</div>
</div>