CSS だけで無限スクロールのカルーセルアニメーション

はじめに#

もちろん JavaScript が好きです。でも CSS だけで何ができるかを試すのはいつも楽しいものです。特にアニメーションに関しては、CSS アニメーションの方が JavaScript アニメーションよりも "軽い" ことが多いです。

この記事では、CSS だけを使用してホバーで一時停止する無限スクロールのカルーセルアニメーションを作成する方法を紹介します。これが今回作成するもののプレビューです:

カードの列を作成する#

まず、カルーセルの基本的な構造を作成しましょう。カードの列を考えてみてください:

いい感じですね？カードはあなたのおしゃれなバナーや商品画像、またはカルーセルで表示したいものなんでもOKです。

カードを複製する#

カルーセルを無限にしたいので、端と端がつながっている必要があります。直感的に、カードを繰り返すことを考えてみましょう:

結果を確認してください:

最初のセットのカードだけが表示されます。HTML を確認すると、第二セットのカードが隠され、第一セットの後に続いているのがわかります。

カルーセルをアニメーション化#

カルーセルにアニメーションを時間です！2セットのカードが接続されているので、カードグループを変形させてカルーセルをアニメーション化できます。方法は次の通りです:

最後にもう一つ追加したいことがあります: カルーセルをホバーしている間にアニメーションを停止することです。これにより、ユーザーは内容をより明確に見ることができます。2セットのカードがあるため、カルーセルをホバーしている間に両方のグループを一時停止する必要があります:

これで完成です！ 🎊 カルーセルをホバーすると一時停止します。

最後に#

CSS は強力であり、CSS を使ってどこまでできるかを探るのはいつも楽しいものです。scroll-snap-type や scroll-snap-align など、インタラクティブなカルーセルを作成するのに役立つ他の CSS プロパティもあります。コーディングを楽しみましょう！🚀