tips / css

写真が画面の端から端へ流れる無限ループするアニメーション

2019-03-16

公開日 : 2017/10/5　最終更新日 : 2019/3/16

写真などを並べて右から左、あるいは上から下など、画面の端から端へ流れるように動くアニメーションを3パターン作成しました。写真は途切れることなく無限にループします。サンプルはいずれも右から左へ動かす場合の作り方です。それぞれのデモもページの最後にご用意しています。

Table Of Contents

CSSアニメーション パターン1（横長の画像）
CSSアニメーション パターン2（複数の画像）
jQueryプラグイン「TweenMax」

CSSアニメーションで作る無限ループアニメーション パターン1（横長の画像）

ループしたい画像群を横に並べて1枚の画像にして、HTMLで2枚読み込みます。

<div class="loop_wrap">
  <img src="img.jpg"><img src="img.jpg">
</div>

サンプルではウィンドウ幅いっぱいに画像を表示させたいので、全体を囲うdivにwidth: 100vw;とoverflow: hidden;を指定します（imgの幅・高さは使用する画像の大きさにあわせて適宜調整してください）。

.loop_wrap {
  display: -webkit-flex;
  display: flex;
  width: 100vw;
  height: 300px;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
}

.loop_css img {
  width: auto;
  height: 100%;
}

アニメーション部分は、transformプロパティのtranslateXでX軸方向の移動距離を変えることで横にスライドして流れるような動きを実現します。imgに対してanimationプロパティにアニメーションの名前と、無限に繰り返すinfiniteを指定します。画像が流れるスピードを変えたい場合はanimation-durationの値を変えます。

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

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

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

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

【画像を2回読み込む理由】

下図のように2つの画像の動きを別にして見てみると、画像(緑)はX軸方向100%から-100%へ移動し100%に戻り再び-100%へ移動するという動きを繰り返し、画像(黄)はX軸方向を0から-200%へ移動し、0に戻り再び-200%へ移動するという動きを繰り返します。ウィンドウサイズの変更などで、ループする画像がウィンドウ幅より小さくなると、ループの繰り返しのなかで余白が生じてしまいます。画像をウィンドウ幅に応じて可変にしたりするなど、ウィンドウ幅が大きい場合の対処が必要になります。

CSSアニメーションで作る無限ループアニメーション パターン2（複数の画像）

ギャラリーのように画像やリンク要素などひとつひとつが独立した要素を並べてループさせることも可能です。

ループさせたい画像群を2セット読み込みます。数が多い場合は2グループに分けて2セットとしてもよいです。

<div class="loop_css">
  <ul>
    <li><a href="#"><img src="img_01.jpg" alt="">CAR</a></li>
    <li><a href="#"><img src="img_02.jpg" alt="">CITY</a></li>
    <li><a href="#"><img src="img_03.jpg" alt="">TAXI</a></li>
    <li><a href="#"><img src="img_04.jpg" alt="">NEON</a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="img_01.jpg" alt="">CAR</a></li>
    <li><a href="#"><img src="img_02.jpg" alt="">CITY</a></li>
    <li><a href="#"><img src="img_03.jpg" alt="">TAXI</a></li>
    <li><a href="#"><img src="img_04.jpg" alt="">NEON</a></li>
  </ul>
</div>

CSSのアニメーションはパターン1と同じですが、リンク要素を並べてループさせる場合、このままでは流しそうめんのようになってしまうので、クリックしやすくするためにマウスをのせたときにアニメーションを一時停止させることも可能です。画像やリンク要素の横並びのレイアウト部分は適宜調整してください。
アニメーションの停止はanimation-play-stateプロパティにpausedを指定します。アニメーションを設定している要素にこれを指定しまうと、マウスをのせたほうのグループのみアニメーションが停止して、もう片方のグループはアニメーションが動き続けてしまうため、全体を囲んでいるdivにマウスをのせた場合にアニメーションが一時停止するように設定します。実際の挙動はページ下部のデモページでご覧ください。

.loop_css:hover ul {
  animation-play-state: paused;
}

TweenMaxで作る無限ループアニメーション

アニメーションのライブラリ「TweenMax」を利用してループを作成します。

ループさせたい画像を横に並べた1枚の画像を用意して、HTMLで読み込みます。

<div id="loop" class="loop">
  <img src="img.jpg" alt="">
</div>

この画像を2枚複製して横に並べてループさせるので、CSSでは画像を囲む全体の幅と横並びの指定をします。（使用する画像にあわせて適宜調整してください）

アニメーションの設定は、TimeLineMaxでタイムラインを作成して、オプションでrepeat: -1（繰り返し＝無制限）を設定します。横に流れるアニメーション部分は、TweenMaxでX軸の移動を設定します。TimeLineMaxのオプションのpaused: true/falseを使用すると、CSSと同様にマウスをのせた場合/はずれた場合でアニメーションの一時停止/再開を設定することもできます。

$(function () {
var loop = document.getElementById('loop_js'),
loopAnim = new TimelineMax({ //タイムラインを作成
repeat: -1 //繰り返し無制限
}),
loopItem = (window.innerWidth, loop.children[0]);

//画像を複製
loop.appendChild(loopItem.cloneNode(true)), loop.appendChild(loopItem.cloneNode(true)),
//横に流れるアニメーション
loopAnim.to(loop, 50, {
ease: Power0.easeNone,
xPercent: -66.66666
}).to(loop, 0, {
ease: Power0.easeNone,
x: 0
})
});

「写真が画面の端から端へ流れる無限ループするアニメーション」のデモはこちら

View All