JavaScript

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

  /

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

Contents

実現方法

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

パラパラアニメを表示させるJavaScriptの記述例

※jquery.min.js（1.4系）ファイルを読み込みます。パラパラアニメを表示させるid、、表示させたいエリアの幅（px）、高さ（px）、フレームレート（フレームス パー セコンド）、切替デフォルト画像（parapara_anime.jpg）、切替りのフレーム最大枚数等を設定し、setInterval()を使って処理を繰り返します。

<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>

パラパラアニメを表示させる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>

パラパラアニメを表示させるHTMLの記述

「パラパラアニメを表示させるCSSの記述例」で指定した範囲（id=”animation”）にパラパラアニメーションを表示させます。

<div id="idBox">


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


</div>

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

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

懸念点

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

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

パラパラアニメ animation
関連記事