今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. マウス操作でくるくる回せる円形の画像ギャラリー「Tiny Circleslider」
  3. シンプルなレスポンシブ・トップメニュー「PrMenu」
  4. 入力した文字数/最大文字数をカウント「BootStrap Maxlength」
  5. ソフトウェアキーボードで暗証番号を入力「Keypad」

スプライト画像を使ったコマ送りのアニメーション「aniJS」

スポンサーリンク

スプライト画像を使ったコマ送りのアニメーションを実装するプラグイン「aniJS」を紹介します。

jQueryプラグイン「aniJS」

このプラグインを使えば、コマを並べたスプライト画像を使ったアニメーションを実装することができます。

オプションでは、fps(frames per second、1秒あたりのフレーム数)やフレームのサイズ(高さ・幅)を設定することができるので、スプライト画像を用意するだけで簡単にアニメーションを実装することができますね。

スポンサーリンク

それではデモページのコマ送りアニメーションをご覧ください。

「aniJS」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="aniJS のデモでーす。">
<title>aniJS - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/anijs.js"></script>
<script>
$(document).ready(function () {
  $('#demo').anijs({
    image: "image.png",
    fps: 1,
    frameWidth: 250,
    frameHeight: 250,
    isReady : function ($this) {}
  });
});
</script>
<style>
#demo {
  margin: 20px;
  padding: 10px;
  border: solid 1px blue;
}
</style>
</head>
<body>
<h1>aniJS のデモです。</h1>
<div id="demo"></div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)