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さま!

 

2013/8/20FancyBoxが動かなくなってたので一時停止&解決策模索中。

<?php wp_head(); ?>

 よりも前に

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

 を挿入したらOKでした。

 

2 comments Add yours

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA