2014/05/03

[jQuery]AniDGプラグイン

PHPSPOTで紹介されていたAniDGプラグイン、これも導入が簡単そうです。
公式マニュアルは、こちらから見ることができるけど、英語www

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

<:script type="text/javascript" src="jquery-ani.dg.min.js"><:/script>

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

<script type="text/javascript">
$(document).ready(function(){
  $('#animation-1').anidg({
    frameWidth: 100,
    frameHeight: 100,
    speed: 100,
    totalFrames: 19
  });
  $('#animation-1').anidg.play();
});
</script>
divタグとリピート用画像が一つあればおkっていうのがいいですね。

デフォルトだと、繰り返し再生になっているので、offにしたい場合は、
<script type="text/javascript">
$(document).ready(function(){
  $('#animation-1').anidg({
    frameWidth: 100,
    frameHeight: 100,
    speed: 100,
    totalFrames: 19,
    loop:false
  });
  $('#animation-1').anidg.play();
  //停止
  $('#animation-1').anidg.stop();
  //ポーズ
  $('#animation-1').anidg.pause();
});
</script>
という風に、loopキーをfalseにすればおk。

前回紹介したプラグインもそうなんだけど、なんで、githubに公開しないのかしらん。

0 コメント:

コメントを投稿