【CSSアニメーション】画面の端から無限ループするスライドをつくろう

CSSアニメーションで無限ループするスライドを作ります。

ブラウザによってアニメーションが動かない、読み込まれないなどのトラブル対処法ものせておきます。

すきま堂のサイトにも実装していますので参考にご覧ください。

すきま堂

デザイナーとプログラマーの制作チーム「すきま堂」です。WEBサイト制作、デザイン制作承ります。

スライド画像の準備
HTMLコード
CSSで無限ループのためのアニメーションを設定する
うまく動かないときの解決方法

スライド画像の準備

まず用意するのはスライドでループさせたい画像です。
上の画像のように、ループさせたい写真を連結させた横長の画像を用意します。

今回はシンプルで簡単にループスライドをつくる！ということが目的なので1枚1枚コードで画像を指定することはしません。

流したい画像の高さを合わせて1枚の画像を作成しておいてください。

HTMLコード

画像が用意できたらさっそく実装していきましょう。

 <div class="loop_wrap">
   <img src="作成したスライド画像のパス"><img src="作成したスライド画像のパス">
 </div>

ここで注意してほしいのが同じ画像を2回読み込ませる部分です。

スライドが途切れて空白ができないようにするために必要になりますので、必ず2回読み込ませてください。

CSSで無限ループのためのアニメーションを設定する

CSSでアニメーションを実装していきます。

.loop_wrap img:first-child {
  animation: loop 60s -30s linear infinite;
}
.loop_wrap img:last-child {
  animation: loop2 60s linear infinite;
}

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

まず2枚の画像へアニメーションの定義をしてから、@keyframesで動きを指示します。

img:first-childで1枚目の画像、img:last-childで2枚目の画像への定義になります。

実装はこれで終わりです！

うまく動かないときの解決方法

特定の環境やブラウザでアニメーションが動かない場合は、CSSをある条件で読み込ませると解決できる可能性があります。

先ほど設定したanime.cssを、JavaScriptでHTML上の他の情報が読み取られた一番最後に読み込ませるようにします。

この時にanime.cssの部分をstyle.cssなどで他のCSSと同じ場所に記述している場合はanime.cssの部分だけ独立したCSSファイルにしておいてください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
    var style = '<link rel="stylesheet" href="anime.cssのパスを記入">';
    $('head link:last').after(style);
});
</script>

上記のスクリプトをHTMLの<head>内に記述します。

以上で作業は完了です。
うまく読み込めない場合はキャッシュの削除もしてみてください。