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

学生時代にノートや教科書の隅で作ったことのあるパラパラアニメ。そのシンプルで楽しい体験を、今回はWeb上で再現してみましょう。
本記事では、JavaScriptのjQueryを使ってパラパラアニメーションを簡単に作成する方法を解説します。初心者エンジニアでもわかりやすいように、ステップごとに詳しく説明します。

Contents

パラパラアニメーションとは？
実現方法
- 必要な準備
パラパラアニメを表示させるJavaScriptの記述例
CSSの記述例
HTMLの記述例
パラパラアニメーションのデモページ
懸念点と改善方法
まとめ

パラパラアニメーションとは？

パラパラアニメーションは、静止画を連続的に切り替えることで、動画のように見せる手法です。映画やアニメーションの基本技術であるこの手法をWebサイトに応用することで、動きのあるインタラクティブな要素を簡単に作成できます。

実現方法

今回は、縦に長い一枚の画像を用意し、それを一定の幅と高さで切り出して表示します。画像の位置を定期的にずらすことで、パラパラ漫画のような効果を実現します。

必要な準備

縦長のアニメーション用画像を用意する。
HTMLファイルとCSSファイルを準備する。
jQueryライブラリ（バージョン1.4以降）をダウンロードまたはCDNで読み込む。

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

次に、アニメーションを表示するための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の記述例

HTMLファイルでは、CSSとJavaScriptで設定したIDを用いて、アニメーションのコンテナを配置します。
「パラパラアニメを表示させるCSSの記述例」で指定した範囲（id=”animation”）にパラパラアニメーションを表示させます。

<div id="idBox">


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


</div>

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

以下のリンクから実際のデモページをご覧ください。

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

懸念点と改善方法

パラパラアニメーションを作成する際には、以下の点に注意してください。

画像の容量: 縦長の画像はファイルサイズが大きくなるため、圧縮して容量を軽減する必要があります。
読み込み時間: 画像の読み込みが完了する前にアニメーションが始まると、正しく表示されない場合があります。画像読み込みイベントを監視することで対応できます。
フレームレート: フレームレートが高すぎると処理負荷が増加します。適切なバランスを取ることが重要です。