風に吹かれて舞い上がる桜のスクリプト(jQuery)

おはようございます.

もうすぐ2月ということで、だいたい春ですね.

ということでjQueryを使った「風に吹かれて舞い上がる桜のスクリプト」を作ってみたので公開します.

スクリプトは自由に使ってください.

デモ

簡単なデモページを用意しました.
usisan.net/demo/sakura.html

夜桜風にしてみたので、フルスクリーン+部屋の電気消す+BGM「荒城の月」+お団子推奨です.

使いかた

まずHTMLには2つの要素を用意してください.

1. 桜が舞う範囲となる親ボックス(.sakura_field, 1ページに1つ)
2. 花びら(.sakura_flake)

<div class="sakura_field">
	<img src="sakura.gif" alt="" class="sakura_flake" />
</div>

1の親ボックスについては、すでに完成しているWEBサイトに組み込む場合などでは専用のボックスを用意する必要はおそらくありません.
範囲としたいボックスにsakura_fieldクラスを指定してください.

2014/3/23 追記: ボックス.sakura_fieldにはoverflow:hidden;を指定しないとスクロールバーがガタガタしてしまいます.

花びらの要素を追加する位置は.sakura_field内であればどこでも良いです.
その際、花びらの枚数はスクリプト側でcloneするため、要素は1つだけにしておいてください.

htmlを用意したら、最後にスクリプトを次のままペーストしてください.
jQueryを忘れずに読み込んでくださいね.

$(function(){

	// なめらかさと花びらの数を変更するにはこの2つのパラメータを操作してください
	var smooth = 40;// 64 < smooth < 16
	var num_flake = 4;// per 640*640px

	var field = $('.sakura_field').eq(0);
	if( field.css('position') == 'static' ){ field.css('position', 'relative');}
	var fw = field.width();
	var fh = field.height();
	num_flake = num_flake*fw*fh/409600;

	var flake = $('.sakura_flake');
	for(var i=0; i<num_flake; i++){
		flake.eq(0).clone(true).appendTo(field).css({'z-index':'255', 'position':'absolute', 'top':Math.floor(Math.random()*fh)+'px', 'left':Math.floor(Math.random()*fw)+'px'});
	}
	flake.eq(0).remove();
	flake = $('.sakura_flake');
	var flake_w = flake.eq(0).width();
	var flake_h = flake.eq(0).height();

	function setPos(n, x, w){
		var sakura_a = flake.eq(n);
		var v_top = sakura_a.offset().top - (8 - 6/(Math.pow(x,2)+1))*smooth/64;
		var v_left = sakura_a.offset().left + (8*x + 12*w)*smooth/64;
		if( v_top < -flake_h ){ v_top = fh;
		}else if( v_top > fh ){ v_top = -flake_h;
		}else if( v_left < -flake_w ){ v_left = fw;
		}else if( v_left > fw ){ v_left = -flake_w; }
		sakura_a.offset({top:v_top, left:v_left});
	}

	var cnt = 0;
	setInterval(function(){
		cnt++;
		if( cnt >= 360*640/smooth ){ cnt = 0;}
		var m = (Math.cos(cnt*smooth/640*Math.PI/180)+1)*180;
		var w = Math.sin((cnt*smooth/64+32)*Math.PI/180);// -1 < x < 1
		for(var i=0; i<num_flake; i++){
			var x = Math.cos((i*360/num_flake+m)*Math.PI/180);// -1 < x < 1
			setPos(i, x, w);
		}
	}, smooth);
});