画像の作成

demo

はじめに雲の画像を用意します。
パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。
わかりやすいように背景がブルーになっていますが、実際は透過pngです。

作成した雲画像

ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。

商用フリーで使える影絵素材サイト シルエットデザイン

jQueryバージョン

最初はjQueryバージョンです。
画像が2つあるのでdivを2つ作成して適当なidを割り当てます。

html

  1. 	<div id="main-img"><div id="bg"></div></div>
  2.

CSSはそれぞれのdivに作成した画像を「background」に割り当てましょう。

css

  1. 	#main-img {
  2. 		width: 800px;
  3. 		margin: 0 auto;
  4. 		background: #9bd6e9 url("bg2.png");
  5. 	}
  6. 	#main-img #bg {
  7. 		height: 250px;
  8. 		background-image: url("bg1.png");
  9. 	}
  10.

jQueryでは「animate」を設定した「cloudMove」という関数を「setInterval」で定期的に実行するようにすれば完成です。
「setInterval」の実行タイミングは「animate」タイムの合計にしておきましょう。

javacript

  1. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  2. 	<script type="text/javascript">
  3. 	$(function() {
  4. 		var bg1 = $('#main-img');
  5. 		var bg2 = $('#bg');
  6. 		var speed = 3000;
  7. 		cloudMove();
  8. 		setInterval(cloudMove, 6000);
  9. 		function cloudMove(){
  10. 			bg1
  11. 				.animate({backgroundPosition:'60px'}, speed)
  12. 				.animate({backgroundPosition:'0'}, speed);
  13. 			bg2
  14. 				.animate({backgroundPosition:'120px'}, speed)
  15. 				.animate({backgroundPosition:'0'}, speed);
  16. 		}
  17. 	});
  18. 	</script>
  19.

どうでしょう。ゆらゆらしてますか！
雲が左右に動くのはものすごく不自然ですが、なんとなく雰囲気出てるんじゃないですかね！！

CSS3バージョン

demo

次にCSS3バージョンです。
CSS3なら複数画像を指定できますのでdivは一つでも大丈夫です。

html

  1. 	<div id="main-img"></div>
  2.

複数画像の指定はいつも使う「background-image」に「,」で区切って並べるだです。簡単ですね。
「-webkit-animation」ではアニメーションの設定をします。
1つ目のオプションは、どのキーフレームを使用するか指定します。ここで指定している「cloudMove」は後述します。
2つ目はアニメーションスピードで、3つ目の「infinite」は無限にアニメーションを続けるという指定です。

css

  1. 	#main-img {
  2. 		width: 800px;
  3. 		height: 250px;
  4. 		margin: 0 auto;
  5. 		background-color: #9bd6e9;
  6. 		background-image: url("bg2.png"), url("bg1.png");
  7. 		animation: cloudMove 8s infinite;
  8. 	}
  9.

最後に「@keyframes」でキーフレームの設定をします。
先ほどの「animation」で設定した「cloudMove」という名称で作成しましょう。
また実際使用するには「@-webkit-keyframes」などベンダープレフィックスを追記する必要があります。

css

  1. 	@keyframes cloudMove {
  2. 		0% {background-position: 0 0, 0 0;}
  3. 		50% {background-position: 40px 0, 80px 0;}
  4. 		100% {background-position: 0 0, 0 0;}
  5. 	}
  6.

動かすのは背景画像なので「background-position」です。
0→40px→0と初期地点に戻すことでループしても違和感なくアニメーションできます。
「background-image」を2つ指定したので、「keyframes」の各プロパティも「,」で句切って2つずつ指定します。

CSS3で無限スクロールバージョン

demo

以前「jQueryで背景画像をアニメーションで無限ループさせる」といのを作ったりしましたが、先ほどのをちょっとカスタマイズすればCSS3で簡単にできてしまいます。

css

  1. 	#main-img {
  2. 		...
  3. 		animation: cloudMove 8s linear infinite;
  4. 	}
  5. 	@keyframes cloudMove {
  6. 		0% {background-position: 0 0, 0 0;}
  7. 		100% {background-position: 400px 0, 800px 0;}
  8. 	}
  9.

先ほどの動きは慣性がついてアニメーションしていましたが、「animation」で「linear」を指定することで均一になります。
「keyframes 」では100%の時点で「400px（画像のサイズ）」を指定すれば無限に続いているようにスクロールします。