【CSSアニメーション】
画像が横スクロールし続ける無限ループの作り方

完成イメージはこちら

01右端から無限ループ

HTMLの書き方

<div class="scroll-infinity">
<div class="scroll-infinity__wrap">
  <ul class="scroll-infinity__list scroll-infinity__list--left">
    <li class="scroll-infinity__item"><img src="sample.png" /></li>                        
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
  </ul>
  <ul class="scroll-infinity__list scroll-infinity__list--left">
    <li class="scroll-infinity__item"><img src="sample.png" /></li>                        
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
  </ul>
</div>
</div>

HTML解説【右からの無限ループ】

今回の例では6枚の画像を画面の左から右までぎっしり並べ無限ループさせていますが、お好みに合わせて利用する画像は増減させることが可能です

HTMLで何枚で構成するかを決めて、何枚の画像を無限スクロールさせるかCSSで指定します

画像サイズもお好みですが、今回は横幅width="300"縦幅height="200"の画像を使用しました

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 6);
}
.scroll-infinity__item>img {
  width: 100%;
}

CSS解説

cssの書き方で作成したCSSコードの【18行目】の部分でループさせるanimationの動作を決めていきます

.scroll-infinity__list--left {
animation: infinity-scroll-left 80s infinite linear 0.5s both;
}

ページ表示がされて0.5秒後に動き出し、80秒かけてすべての画像が左端まで移動するよう指定をしています

02左端から無限ループ

HTML書き方

<div class="scroll-infinity">
<div class="scroll-infinity__wrap">
  <ul class="scroll-infinity__list scroll-infinity__list--right">
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
  </ul>
  <ul class="scroll-infinity__list scroll-infinity__list--right">
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
    <li class="scroll-infinity__item"><img src="sample.png" /></li>
  </ul>
</div>
</div>

HTML解説【左からの無限ループ】

HTMLの内容とCSSの内容をleftからrightに書き換えるだけで簡単に左からの無限ループを作ることができます

CSSの書き方

@keyframes infinity-scroll-right {
from {
  transform: translateX(-100%);
}
  to {
  transform: translateX(0%);
}
}
.scroll-infinity__list--right{
  animation :infinity-scroll-right 80s infinite linear 0.5s both;
}

CSS解説

CSSの内容をleftからrightに忘れずに書き換えましょう

03文字の無限ループ

HTMLの書き方

<div class="scroll-infinity">
<div class="scroll-infinity__wrap">
  <ul class="scroll-infinity__list scroll-infinity__list--left">
    <li class="scroll-infinity__item--text">css animation scroll infinity</li>
    <li class="scroll-infinity__item--text">css animation scroll infinity</li>
    <li class="scroll-infinity__item--text">css animation scroll infinity</li>
  </ul>
  <ul class="scroll-infinity__list scroll-infinity__list--left">
    <li class="scroll-infinity__item--text">css animation scroll infinity</li>
    <li class="scroll-infinity__item--text">css animation scroll infinity</li>
    <li class="scroll-infinity__item--text">css animation scroll infinity</li>
  </ul>
</div>
</div>

HTML解説

text部分の文字「css animation scroll infinity」に関してはお好きな文字を入力してみてください

.font-sizeや.color.font-familyは好きなように変更できます(その他色々可能)ので、カスタマイズの幅は無限大です

CSSの書き方

.scroll-infinity__item--text {
  font-family: Comfortaa,cursive;
  width: calc(500vw / 3);
  font-size: 15rem;
  color: #222;
}

CSS解説

記載したい文字数によってwidth: calc(500vw / 3)の数値をいじってみてください
今回の私のCSSは上記の通りで設定をしました

04無限ループ一時停止

CSSの書き方

一時停止についてのHTMLは記載の必要はありませんのでCSSのみ記載していきたいと思います

.scroll-infinity__wrap:hover .scroll-infinity__list--right{
  animation-play-state: paused;
}

animation-play-stateとは、アニメーションが再生中か一時停止状態かの指定をします

ポインターが要素に乗った際に、アニメーションが一時停止されるプロパティになります

05まとめ

いかがでしたでしょうか？
画像や文字が無限にループし続けるアニメーションについて解説をしてきました

ホームページを作りたい方にとっても、WEB制作を始めたばかりの方にとってもどんなことができるのか？の参考になれば幸いです