Blog

ブログ

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

2023.03.14

WEB制作でどんなことができるかを知ることってすごく大事ですよね!

ホームページの制作をする人も、制作してもらう人もどんなことができるかを知り、魅力的でオリジナリティのあるホームページを作っていきましょう!

今回は複数の画像を無限に横スクロールさせるアニメーションを作っていきたいと思います。

完成イメージはこちら

  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • スクロール画像
  • css animation scroll infinity
  • css animation scroll infinity

01右端から無限ループ

画面の右から左へ画像を無限ループさせたい場合はHTMLを以下のように書いていきます

sample.png」の部分は好きな画像URLを挿入してください

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"の画像を使用しました

CSSの書き方

@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を書いてみましょう

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無限ループ一時停止

ポインターを画像もしくは文字上に:hoverさせた時にループを止めることができます

さらに<a>タグと組み合わせて使うことで別のリンクにジャンプすることも可能です

CSSの書き方

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

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

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

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

05まとめ

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

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

rita-plus.web_sales-banner

Contact
お問い合わせ

まずはお気軽にご相談ください