TailwindCSSでアニメーション付き無限カルーセルを作ろう！

Infinite carousel with tailwindcss with animations

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

この投稿では、TailwindCSSを使用して簡単にアニメーション付きの無限ロゴカルーセルを作成する方法を紹介します。このエフェクトは、ロゴだけでなく、動画やdivなど他のコンテンツにも使用できます。

TLDR; コード全体はこちらで確認できます: play.tailwindcss.com/LiptaMZ4Hp

また、このコードブロックはUiBun Visual Editorにインポートすることもできます。

始めに

無限カルーセルをTailwindCSSで作成するには、次の2つのことを行う必要があります。

1. HTMLおよびTailwindCSSコードを書く
2. 無限スクロールアニメーションをサポートするようにTailwind設定を更新する

HTMLおよびTailwindCSSコード

こちらがTailwindCSSで作成した無限ロゴカルーセルのHTMLコードです。注意深く見ていただくと、ユーザーがホバーしたときにカルーセルを一時停止する機能も追加していますが、この機能はTailwindCSSではデフォルトで利用できません。

ホバー時の一時停止には、CSSのanimation-play-stateプロパティを使用しますが、これはTailwindCSSにはまだ組み込まれていません。そのため、globals.cssファイルを更新してサポートを追加する必要があります。以下にコードを示します。

index.html

<section class="bg-black text-white pt-8 pb-4">
  <h2 class="text-center text-2xl mb-2 font-bold leading-8">Our Clients</h2>
  <p class="text-center text-lg font-extralight leading-8">We are trusted by the world’s most innovative teams</p>
  
  <div class="logos group relative overflow-hidden whitespace-nowrap py-10 [mask-image:_linear-gradient(to_right,_transparent_0,_white_128px,white_calc(100%-128px),_transparent_100%)]">
    <div class="animate-slide-left-infinite group-hover:animation-pause inline-block w-max">
      <!-- Ensure that the images cover entire screen width for a smooth transition -->
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/transistor-logo-white.svg" alt="Transistor" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/reform-logo-white.svg" alt="Reform" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/tuple-logo-white.svg" alt="Tuple" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/savvycal-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/statamic-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/laravel-logo-white.svg" alt="SavvyCal" />
    </div>

    <!-- Duplicate of the above for infinite effect (you can use javascript to duplicate this too) -->
    <div class="animate-slide-left-infinite group-hover:animation-pause inline-block w-max">
      <!-- Ensure that the images cover entire screen width for a smooth transition -->
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/transistor-logo-white.svg" alt="Transistor" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/reform-logo-white.svg" alt="Reform" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/tuple-logo-white.svg" alt="Tuple" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/savvycal-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/statamic-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/laravel-logo-white.svg" alt="SavvyCal" />
    </div>
  </div>
</section>

このコードからもわかるように、無限スクロールエフェクトを実現するためには、ロゴを重複させる必要があります。理想的には、HTMLの重複なしで無限に遷移させる方法を作成したいと思っています。その方法を近いうちに公開予定ですので、通知を受け取るためにニュースレターに登録してください。

Tailwind設定

無限スクロールアニメーションをサポートするために、次のkeyframesとアニメーションをTailwind設定に追加します。

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
      keyframes: {
        'slide-left': {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(-100%)' },
        },
      },
      animation: {
        'slide-left': 'slide-left 8s linear infinite',
      },
    },
  },
  plugins: [],
}

ここでは、slide-left keyframeが要素を画面幅の0%から-100%へスライドさせています。これを8秒間でリニアに無限ループさせることで、スムーズなカルーセルエフェクトを実現しています。

ボーナス: アニメーションを一時停止するためのTailwindCSSユーティリティ

このユーティリティクラスはアニメーションを一時停止するために使用します。上記のコードでは、ユーザーがロゴカルーセルにホバーしたときにアニメーションを一時停止するために、group-hoverを使用しています。

globals.cssファイルを更新し、アニメーションの一時停止をサポートするユーティリティクラスを追加します。

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animation-pause {
    animation-play-state: paused;
  }
}

結論

見ての通り、TailwindCSSを使って無限ロゴカルーセルを追加するのはとても簡単です！