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

css CSS3
スライドアニメーション

CSSアニメーションで簡単に無限ループするスライドをつくって実装してみましょう。
ブラウザによってアニメーションが動かない、読み込まれないなどのトラブル対処法ものせておきます。

実際のサイトにも組み込んでみましたので参考にしてみてくださいね。

スライド画像の準備

スライド用画像

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

今回はシンプルで簡単にループスライドをつくる!ということが目的なので1枚1枚コードで画像を指定することはしません。流したい画像の高さを合わせて1枚の画像を作成しておいてください。

HTMLコードを書く

画像が用意できたらさっそく実装していきましょう。
まずは下記のようにHTMLから。

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

ここで注意してほしいのが同じ画像を2回読み込ませる部分です。
スライドが途切れて空白ができないようにするために必要になりますので、必ず2回読み込ませてください。

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

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

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
.loop_wrap img:first-child {
  animation: loop 60s -30s linear infinite;
}

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

@keyframesで2枚の画像アニメーション定義をしてから、それぞれの画像へアニメーションを適用します。

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>内に記述します。

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

タイトルとURLをコピーしました