CSS

画像を画面の右から左へ無限に移動するアニメーション

先日の記事「なんちゃって健康食品サイトのコーディング（1/2）」でも少し触れましたが、企業サイトとかでよく見る、広告が横にスライドするやつを作ってみました。

 

下のCSSは、ダミー画像5枚を無限にスライドさせるCSSアニメーションです。

See the Pen slide_loop by hrdayk (@hrdayk) on CodePen.

もし間違ったコードを書いていたらお手数ですがご指摘ください…m()m

 


作成にあたってはこちらの２サイトを参考にさせて頂きました。

 
後者のサイトでは、図と解説で丁寧に説明して下さっているのでわかりやすいと思います。
ただこれ、頭の中だけで考えると相当ややこしいので、まずはサイトのサンプルソースをコピペして動いているのを見ながらの方が理解が早いと思います…。私は何度もはまりました。。

 

原理については上記サイトがわかりやすいので詳細は割愛しますが、何をしたかというと、下のように、画像を初期位置から画面の端まで(画面外に出るまで)、translateXでゆっくり移動させる、というのを無限ループさせています。

※図の30秒はあくまで例で、上のサンプルソースとは関係ありません

 

上の図だと、移動させているのは画像1枚だけですが、これを5枚の画像に対して行っているのが以下です。

 

今回の難しい点は、移動させる画像が複数枚になると、画像の初期位置が5枚とも異なるため、画面外に出るタイミングが異なってしまうことです。

これを解決するために、画像1～5それぞれ、アニメーションの開始時間をずらしています。



画像1のCSSアニメーションのコード：
animation: loop 50s -40s linear infinite;

画像2のCSSアニメーションのコード：
animation: loop2 50s -30s linear infinite;

画像3のCSSアニメーションのコード：
animation: loop3 50s -20s linear infinite;

画像4のCSSアニメーションのコード：
animation: loop4 50s -10s linear infinite;

画像5のCSSアニメーションのコード：
animation: loop5 50s linear infinite;

 

 

青文字の50sはanimation-durationプロパティ（アニメーションが始まってから終わるまでの時間）、赤文字はanimation-delayプロパティ（アニメーションの開始時間）です。

animation-delayが正の値の場合、その時間分遅れてアニメーションが開始されますが、負の値の場合、その時間だけさかのぼったタイミングからアニメーションを開始したような動きになります。

画像1のanimation-delayが-40sということは、実質、40s前からアニメーションが開始されていたときの動きになるので、初期位置は40s後の位置になります。

 

 

ちょっとわかりにくいので図を書きます。
以下は「画像が画面外まで移動するCSSアニメーション(animation-durationが50sの場合)」です。

画像1のアニメーション開始時の位置は図中で「40秒後」と書いてある画像の位置になります。

同様に、画像2は30秒後の位置、画像3は40秒後の位置･･･というように、アニメーションの開始時間をずらしています。


ちなみに、以下のようにtranslateXに％を指定すると、自身(画像1)の幅の割合分移動します。

・画像1のCSSアニメーションのコード：

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

 

 


自分が理解しづらかった部分に焦点を当てているので、説明が色々と不足しているかと思いますが、0よりはなんとなーくでも理解に役立てば幸いです(いかんせん画像が見づらくて申し訳ないです。。)



スライドアニメーションの記事はひとまずここまで。
最後まで読んで下さりありがとうございました！