パラパラ漫画のようなアニメーションを実装するjQueryプラグインを作ってみた

パラパラ漫画のようなアニメーションを実装するjQueryプラグイン「parapara-animation.js」を作りました。
アニメーションgifと比べて画像が重くなりそうですが、jpgや透過pngを使用できて、動きを1順で止めたりもできるので、使いどころは割とありそうに思います。
「parapara-animation.js」のデモページはこちら
「parapara-animation.js」のダウンロード

設定方法

jQueryとparapara-animation.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="parapara-animation.js"></script>

HTML

<div id="sample"><img src="ball.gif" width="100" height="4000" alt="" /></div>

画像はフレーム毎に分けた画像を縦に並べるようにします。
今回はこのような画像使用しています。

CSS

#sample {
	width: 100px;
	height: 200px;
	overflow: hidden;
}

CSSはJavaScriptオフ時用のものなので、対応不要の場合は特に必要ありません。

JavaScript

$(function(){
	$("#sample").pa({
		flameHeight: 200
	});
});

flameHeightは1フレームの高さを指定するもので、必須になります。

オプション

$(function(){
	$("#sample").pa({
		flameHeight: 200,
		speed: 70,
		roop: true,
		roopWait: 1000
	});
});