コーポレートサイトなどでよく見る画像の無限ループはCSSだけで実装ができます。HTMLとCSSだけでコードの管理もしやすくなるので、もし実装することがあればぜひ使ってみましょう。

サンプル

サンプルを見てみましょう。

See the Pen
無限ループスクロール by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

3枚の画像が繰り返して無限に横スクロールします。

HTML

HTMLはこんな感じです。

<div class="scroll-image">
  <ul>
    <li class="image"><img src="https://placehold.jp/ffa502/ffffff/1280x720.png"></li>
    <li class="image"><img src="https://placehold.jp/1e90ff/ffffff/1280x720.png"></li>
    <li class="image"><img src="https://placehold.jp/747d8c/ffffff/1280x720.png"></li>
    <li class="image"><img src="https://placehold.jp/ffa502/ffffff/1280x720.png"></li>
    <li class="image"><img src="https://placehold.jp/1e90ff/ffffff/1280x720.png"></li>
    <li class="image"><img src="https://placehold.jp/747d8c/ffffff/1280x720.png"></li>
  </ul>
</div>

表示させたい画像は3枚なのですが、同じ要素をコピーして合計6枚にしておくことで、はみ出した要素が不自然にならないようにします。

下記のこの3枚分をもう1セット作っているということですね。5枚ならトータル10枚、7枚なら14枚になります。

<li class="image"><img src="https://placehold.jp/ffa502/ffffff/1280x720.png"></li>
<li class="image"><img src="https://placehold.jp/1e90ff/ffffff/1280x720.png"></li>
<li class="image"><img src="https://placehold.jp/747d8c/ffffff/1280x720.png"></li>

1画面に表示させる画像の枚数にもよるので、適宜変更してください。

CSS

CSSはSCSSを使っています。

.scroll-image {
  overflow: hidden;

  ul {
    list-style: none;
    display: flex;
    width: max-content;
    animation: scrollAnimation 8s linear infinite;

    @keyframes scrollAnimation {
      0% {
        transform: translateX(0%);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    li {
      width: calc(100vw / 3);

      img {
        display: block;
        width: 100%;
      }
    }
  }
}

ネストだらけ！

.scroll-image

overflow:hidden;で、横並びにした画像がはみ出してもレイアウトが崩れないようにしておきましょう。

ul

<div class=”scroll-image”>の中にある<ul>は、display: flex;で横並びにしておきます。画像同士の隙間は必要に応じてgapとかmarginとかで調整してみてください。

li

<div class=”scroll-image”>の中にある<ul>の中にある<li>ですね。1画面に表示させる最大枚数を決めるので、width: calc(100vw / 3);となっています。例えば1画面に5枚表示させるのであればwidth: calc(100vw / 5);にして、HTMLの画像の枚数はトータルで10枚にする必要があります。

画像の枚数に応じて変更してください。

@keyframes

@keyframesは<ul>で指定したanimationの動きを指定するものですね。animationで8sとしているので、8秒かけてアニメーションします。

スクロールする方向は横なのでtranslateXにして、スクロール量は要素の半分の値にするためtransform: translateX(-50%);にしておきましょう。これで8秒かけて3枚分スクロールするようになります。

5枚でも10枚でもtransform: translateX(-50%);のまま変えちゃダメですよ。

サンプルでは左から右にスクロールしていますが、右から左にスクロールする場合はtranslateX(-50%);をtranslateX(50%);にすることで可能です。

さいごに

画像の無限ループはslickを使ってもできるのですが、やっぱりCSSだけで完結できると軽くなったりコード管理がシンプルになったりするメリットがたくさんあります。マウスをホバーさせるとスクロールを止める…なんてことはJavaScriptを使う必要がありますが、ただスクロールさせるためだけならCSSで充分ですね。

汎用性も高いと思いますので、ぜひ使ってみてください。