[jQuery]幻想的な雲海のアニメーションを作ってみました。[サンプルコードあり]

以前、Illustratorチュートリアルで雲を作成したので、今回はこの雲を動かしてみたいと思います。
複雑な動きとなるとまだまだ自分にはハードルが高いですが、簡単なループならできたのでシェアしたいと思います。

jQueryで流れる雲を表現してみよう

参考にさせていただいたのはこちらのブログです。

背景に指定した雲を無限ループさせるアニメーション

デモページはこちらです。

動かす雲画像はこちら。

この雲のチュートリアルは「[筋斗雲]Illustratorで和風・中華風の雲を描くチュートリアル　-和素材作り-」で紹介しています。
ほとんど上記2ブログで紹介されているままなのですが、ソースはこんな感じです。
HTML

CSS

jQuery

jQueryについて順番に見ていきましょう。
アニメーションスピードを大きくするほど早く動きます。

web0pixcelさんで紹介されているようなシームレスなパターンを動かす場合は初期位置０にします。
私は初期状態では画像が見えない状態で、ゆっくり左から流れてくるようにしたかったので、画像サイズ分マイナス指定しています。そして画像サイズ分右に流れたら再び初期位置に戻って流れるようにループさせています。

setInterval関数について
一定時間ごとに特定の関数を呼び出す。背景のループ以外にも、一定間隔で文字や画像を表示させるスライドショーをつくったりできます。

応用すれば色々使えそうな予感です。

代入演算子
13行目で演算子「+=」が登場します。
a += b
これはa = a+bと同じ意味です。
つまり
posX += scrollSpeed
というのは
postX = postX + scrollSpeed
を書き換えたものです。

これでscrollSpeedずつ移動します。実際に画像を動かすため、14行目でcssを書き換えています。

幻想的な雲海のアニメーションを作る

さらに背景画像の枚数を増やして雲海を表現してみました。デモはゆーーっくり雲を流しているので暫く眺めて見てください。用意する画像は「雲（奥）、山、雲（手前）」の3枚の画象です。

この3枚を重ねて、さらに雲をアニメーションします。イメージはこんな感じ。

html

CSS

z-indexを使って画像の重なり順を指定しています。
ちなみにCSS3では複数の背景画像を一度に指定できるようになりました。アニメーションしない場合、CSS3ではこのように書き換えることができます。

ではjQueryを使って雲海を作りたいと思います。
jQuery

はい、「雲をループさせる」とほぼ同じですね。
ちがうのは15行目からです。雲を左から右へ流すのはこれまでと同じですが、さらに手前の雲だけfadeIn、fadeOutを繰り返しています。こうする事でぐっと幻想的な雰囲気がでました！

今回はcallbackにfadeInを指定しています。
16行目を文章で書くと、「animationCloudBackクラスの中にあるdivの内、0から数えて1番目のdivにfade処理を行う」です。