夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

【CSSだけ】画像が横に流れ続ける無限ループの作り方 - IE11対応済み

【CSSだけ】画像が横に流れ続ける無限ループの作り方 -IE11対応済み

今回はCSSだけで画像が横に流れる無限ループの作り方を紹介します。デモサイトを作成したので、表示を確認してみてください。

デモサイト

前提条件は以下

  • 画像を左方向と、右方向に無限ループさせる
  • IE11対応済み

説明環境は以下

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.56.2
この記事の目次

【CSSだけ】画像が横に流れ続ける無限ループの作り方

CSSだけで実装できるので難しいことはありません。画像のサイズだけではすべて揃えておきましょう。

画像が左方向に流れる無限ループについて説明していきます。

MTMLに書くこと

<div class="d-demo">
   <div class="d-demo__wrap">
       <ul class="d-demo__list d-demo__list--left">
           <li class="d-demo__item"><img src="./images/test01.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test02.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test03.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test04.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test05.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test06.jpg" alt></li>
        </ul>
        <ul class="d-demo__list d-demo__list--left">
           <li class="d-demo__item"><img src="./images/test01.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test02.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test03.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test04.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test05.jpg" alt></li>
           <li class="d-demo__item"><img src="./images/test06.jpg" alt></li>
        </ul>
   </div>
</div>

6枚の画像を画面いっぱいに並べて、それを無限ループさせます。ループに切れめができないように同じ画像の列が２つあるイメージです。（以下の6枚１列が、横に２つ並んでいる、ということ）

CSSに書くこと

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 6);
}
.d-demo__item > img{
   width: 100%;
}

35行目にあるanimationで無限ループの指定をしています。ページが表示されて0.5秒後に、95秒かけて6枚の画像すべてを左端まで移動させています。

どのように動かすかの指定は、4行目にある@keyframesで指定しています。右から左ではなく、左から右へ画像を無限ループさせたい場合は@keyframesは以下のようになります。

あとはHTML側でもクラス名d-demo__list--rightを指定してあげれば左から右へ画像が動きます。

/*
左から右へ
----------------------------*/
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

.d-demo__list--right{
animation :infinity-scroll-right 95s infinite linear 0.5s both;
}

IE11については、2022年6月15日にはサポートが終了するため対応はいらない気がしますが、保険して指定しています。

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

IE対策については以下の記事を参考にしてみてください。

CSSでIE11を判定する方法と、JavaScriptでIE11だけpolyfillを読み込む書き方

マウスオーバーで一時停止させるには？

マウスオーバーしたときに、一時的に動きを止めることが可能です。

やり方はCSSで以下にように指定するだけです。スマホでもタップすれば一時停止します。

.demo__wrap:hover .d-demo__list--left{
  animation-play-state: paused;
}

デモサイトで一時停止するか確認してみてください。

デモサイト

さいごに

今回はCSSだけで画像が横に流れる無限ループの作り方を紹介しました。少し前まではJavaScriptを使わないと実装できないことがCSSだけでもできるようになりました。

基本的にはサイトに動きをつける装飾としての役割が多いですが、画像にリンクをつけることも可能です。

こちらの記事も読まれています