パラパラアニメを表示させるjQuery



フレーム別けされた一枚の縦長画像をパラパラアニメの様に
jQueryで表示させる方法です。
 

1.ヘッダー、JavaScriptの記述

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var id  = "animation";	//パラパラアニメを表示させるid
var width  = 300;	//表示させたいエリアの幅(px)
var height = 300;	//表示させたいエリアの高さ(px)
var fps    = 6;	//フレームレート(フレームス パー セコンド)
var src    = "./parapara_anime.jpg";
var frame = 0;
var max_frame = 10;	//切替りのフレーム最大枚数
var onceFlg = false;

$(document).ready(
	function (){
		$("#"+id).css({
			"background":"url("+src+")",
			"width":width,
			"height":height
		});
		var interval = 1/fps*1000;
		animation = setInterval(intervalEvent, interval);
});
function intervalEvent(){
	$("#"+id).css({
		"background-position":"0 "+ -height * frame +"px"
	});
	frame++;
	if(frame>=max_frame){
		if(onceFlg) clearInterval( animation );
		frame = 0;
	};
}
</script>

 

2.CSSの記述

(以下左右中央に設定しているだけで、特に真似する必要は無いです)

#idBox{
	width:300px;
	height:300px;
	margin:0 auto;
}

 

3.HTMLの記述

<div id="idBox">
	<div id="animation"></div>
</div>

 
パラパラアニメを表示させるjQueryのデモ
 
解像度が高くアニメーションする画像のフレーム数が多いと、
ページの読込みまでに時間が掛かる可能性がありますので、

ページの使用画像読み込み後にJAVASCRIPT処理を実行する記述

の処理を実行した後に実行した方が良いかもしれません。