JavaScriptで画像を分割・回転・移動させる｜mamImageSplit.jsで簡単アニメーション

画像をJavaScriptだけで動かす方法を探していませんか？
このページでは、画像を分割・回転・移動・フェードアウトさせるアニメーションを簡単に実装できるライブラリ「mamImageSplit.js」を紹介します。
画像掲示板やインタラクティブな演出に活用できる、軽量で柔軟なスクリプトです。

mamimgsplit.js(14KB)ダウンロード

■使い方

上記ボタンを押してmamimgsplit.jsをダウンロードします。

mamImageSplitを使いたいファイルで、

  <script src="./js/mamimgsplit.js"></script>

のように、相対又は絶対パスでmamimgsplit.jsを指定します。

クラス名に"mam-image-split"を指定したdivタグを設置します。
data-split属性に縦又は横方向の最大分割数設定します。
このdivタグの子要素にimgタグを設置します。

  <div class="mam-image-split" data-split="20" >
    <img src="画像URL">
  </div>

■使用例

<div style="display:flex;">
  <div style="width:20%;"></div>
  <div class="mam-image-split" style="max-width:800px;width:80%;" data-split="20">
    <img src="./imgs/0001s.jpg" style="width:100%;">
  </div>
  <div style="width:20%;"></div>
</div>