2014/10/16

タイル状のアニメーションを追加できるプラグイン『jQuery-animations-tile』の使い方

タイル状のアニメーションを追加できるプラグイン『jQuery-animations-tile』の使い方

画像などの要素にタイル状のアニメーションを追加できるプラグインを紹介します.

目次

入手・設置方法

https://github.com/emn178/jquery-animations-tileにアクセスし,右側のDownload ZIPをクリックしてダウンロードします.

そして,解凍したファイル内の以下のファイルを読み込みます.

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.animations.min.js"></script>
<script type="text/javascript" src="jquery.animations-tile.min.js"></script>

使用方法

画像にアニメーションを追加するには,以下のようにオプションを指定してスクリプトを実行します.

$('#image').animate('tile', {
    // 動作にかかる時間
    "duration" : 2000,
    // 縦の高さを何等分するか
    "rows" : 2,
    // 横の幅を何等分するか
    "cols" : 8,
    // エフェクト動作
    "effect" : "flyOut",
    // 動作の順番
    "sequence" : "lr",
});

サンプル

詳細なサンプルは,http://emn178.github.io/jquery-animations-tile/samples/tile/にあります.

動作もサンプルとして見られるので,実装する際にイメージ作りとしてもいいかもしれません.

また,https://github.com/emn178/jquery-animations-tile/blob/master/README.mdに,オプションの詳細な解説が記載されています.

まとめ

目を引くことが間違いない上,アニメーションをカンタンに追加でき,演出のパターンも様々にあるので,実装を検討してみてはいかがでしょうか.