画像を使ったパラパラ漫画のような手法といえば、GIFアニメの専売特許だったりしますが、javascriptを使うことで、jpgファイルやpngファイルでも同じような動きを再現することができる。以下は、その手法。

※このキャラクターは1985年に任天堂から発売されたファミコン用ゲームソフト「スーパーマリオブラザーズ」内に登場するメインキャラクターです(世界レベルで知らない人はいないかと思うけど)。本キャラクターの著作権は nintendoに帰属します。

サンプル

See the Pen jpgやpng画像でGIFアニメーション by Tora (@webtoranomaki) on CodePen.

コード

HTML


<div id="item"></div>

Javascript

※事前にjQueryライブラリを読み込んでおく


var id  = "item"; /* 対象ID */
var width  = 84; /* 表示領域の幅 */
var height = 89; /* 表示領域の高さ */
var fps    = 4; /*1秒間あたりのフレーム数 */
var src    = "https://webtoranomaki.com/demo/1807_png_animation/img/item01.png"; /* 画像パス */
var frame = 1; /* 開始フレーム */
var max_frame = 2; /* 画像コマ数 */
var onceFlg = false; /* ループ1回で終わらせるかどうか */

$(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;
	};
}

解説

このアニメーションを行うには、まずパラパラ漫画のコマを縦に並べた画像を用意する。

で、これを表示させる要素(#item)を用意し、要素の縦横の表示領域をjavascriptで設定。

あとはjavascriptが自動で表示領域の高さ分をコマの数だけ画像を上にずらして表示させる、という仕組み。最終コマ到達後は1コマ目に戻る。