javascript～ふわふわと浮かぶ雲。8/20追記あり

ちょっと前から、
なんとなーくやってみたいことのひとつに
「背景に雲を配置してふわふわと動かしてみたい」というのがあった。

時間ができたらやってみようと思いながら
延ばし延ばしにしてたけど。

思いついて、さっそく検索。
「ふわふわ　javascript」
検索結果の一番上に出てきたエントリー。
そのままズバリ！「ふわふわしてるコンテンツ | かえラボBlog」

とっても簡単だったので嬉しくなってご紹介。
デモページ：wiggle←このかわいさにヤラレタ！

var i = 0;
	(function move(){
		// プラスマイナスを交互に渡す
		i = i > 0 ? -1 : 1;

		var p = $("#sample").position().top;

		$("#sample").animate({ top: p + i * 10 }, { 
			duration: 500,
			complete: move // アニメーション完了後に関数を再帰呼び出しする。
		});
	})();

まんま引用しちゃった(=￣∇￣=) ﾆｨ

最初、↑をhead内に書いたけど動かず。
なので、動かしたい要素の直下に書いた。

duration：500,ってとこが動かすスピードで大きいほどゆっくりになる。

duration

アニメーションの動作期間を指定します。”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
初期値は”normal”です。

“#sample”ってところが、動かす要素。
動かしたい要素（コンテンツ）にIDを付けて指定します。

後はhead内に

<script src="http://www.google.com/jsapi/"></script>
<script>google.load("jquery", 1)</script>

スタイルシートで適宜調整をされよ！

こんな素晴らしいエントリ－をありがとう♪
かえラボBlogさま！

<?php wp_head(); ?>

<script src="http://www.google.com/jsapi/"></script>
<script>google.load("jquery", 1)</script>