03-6416-3903

平日10:00〜18:00

CONTACT

最新情報 & コラム

横方向に流れる無限ループスライドショーの作り方

ALLWEB

横方向の無限ループのスライドはwebサイトではよく見る表現ですが、CSSだけで実装することができます。今回はその無限スライドの作り方をご紹介します。

画像の用意

無限ループのスライドに入れたい画像を、横一列に並べて新たに画像を作成します。

使用する画像の枚数によっては、横にすごく長くなります。

画像を上のように横一列に並べる

HTML

画像の用意ができたらHTMLを書いていきましょう。

HTMLはとてもシンプルで、2つのimgタグをdivで括るだけです。

imgタグの中身は、どちらにも先ほど作成した画像を入れます。

<div class="loopWrap">
  <img src="画像URL"><img src="画像URL">
</div>

SCSS

中のimgを横並びにするためにloopWrapにdisplay:flexを指定します。loopWrapの幅は画面幅いっぱいなので100vw。
はみ出した部分を非表示にするためのoverflow:hiddenを記述します。
heightはスライドの高さなので自由に決めて大丈夫です。

次の工程で「loop」「loop2」というアニメーションのコードを記述しますが、先にanimationプロパティの記述をそれぞれのimgに記述しておきましょう。

animationプロパティの「60s」はanimation-durationでスライドの速度に当たります。数値が大きくなるほど、スライドの速度は遅くなります。ふたつのスライドの数値は揃えないとずれてしまうので注意してください。

.loopWrap {
    display: flex;
    width: 100vw;
    height: 300px;
    overflow: hidden;

    img {
        width: auto;
        height: 100%;

        &:first-child {
            animation: loop 60s -30s linear infinite;
        }

        &:last-child {
            animation: loop2 60s linear infinite;
        }
    }
}

imgにそれぞれ「loop」と「loop2」というアニメーションを設定していますが、それぞれアニメーションのコードは書いていきます。

スライドはX軸に移動するだけの単純な動きなので、transform:translateXで位置を指定してあげるだけです。

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

これで無限ループのスライド画像を実装することができます。