[JS]背景画像をアニメーションさせるjQueryのプラグイン -jAni

再生や一時停止、停止などコントロールも可能な、背景画像をアニメーションさせるスクリプトをajaxBlenderから紹介します。

jAni
demo

スクリプトの設置も簡単で、下記のようになります。

JavaScript

外部スクリプトとして、2ファイル記述します。

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jani.js"></script>

CSS

背景画像をスタイルシートで配置します。
デモで使用している画像はsample-animation.gifです。

<style type="text/css">
.animation-1 {
	background: url(./images/sample-animation.gif) no-repeat left top;
}
</style>

HTML

背景画像を表示する要素（div）を配置します。

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

JavaScript

スクリプトに表示の設定を指定します。

<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$('#animation-1').jani.play();
});
</script>

設定では、背景画像のサイズ、スピード、フレーム数、ループ対応、が指定できます。

また、コントロール機能も設置が可能で、再生、一時停止、停止の3つのメソッドがあります。