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

Post on:2010年1月14日

JavaScript

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

<textarea name="code" class="js" cols="60" rows="5">
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jani.js"></script>
</textarea>

</textarea>

CSS

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

<textarea name="code" class="css" cols="60" rows="5">
<style type="text/css">
.animation-1 {
	background: url(./images/sample-animation.gif) no-repeat left top;
}
</style>
</textarea>

.animation-1 {

background: url(./images/sample-animation.gif) no-repeat left top;

}

</style>

</textarea>

HTML

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

<textarea name="code" class="html" cols="60" rows="5">
<div id="animation-1"></div>
</textarea>

</textarea>

JavaScript

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

<textarea name="code" class="html" cols="60" rows="5">
<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$('#animation-1').jani.play();
});
</script>
</textarea>