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

学生時代に一度は誰しもノートや教科書の切れ端でやったことはあるであろうパラパラアニメ、それを、社会人にもなってやることになりました、JavaScriptで。

実現方法

教科書では無く、今回は一枚の縦長の画像を使用します。
表示範囲を決めて等間隔で移動させてパラパラアニメの様に表示させます。

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の記述例

<style type="text/css">
<!--
h1{
	font-size:14px;
	font-weight:normal;
	text-align:center;
}
h2{
	font-size:14px;
	font-weight:normal;
	text-align:center;
	line-height:1.4em;
}
#idBox{
	width:300px;
	height:300px;
	margin:0 auto;
}
-->
</style>

3．HTMLの記述

「2．CSSの記述例」で指定した範囲にパラパラアニメーションを表示させます。

<div id="idBox">


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


</div>

パラパラアニメーションのデモページ

懸念点

縦長の画像は容量が重くなるので、可能な限り容量は軽くする必要がありそうです。
または、一度画像を読込んでからJavaScriptの処理を実行させると良いかもしれませんね。

※もし、流用される方は大変恐縮ですが自己責任でお願い致します。