JavaScriptで画像を分割してアニメーションさせる｜mamImageSplit.jsの使い方
このページでは、JavaScript ライブラリ mamImageSplit.js を使って、画像を複数のパーツに分割し、回転・移動・フェードアウトさせるアニメーションを実装する方法を紹介します。
canvas や WebGL を使わず、純粋な JavaScript だけで軽量に実装できるのが特徴です。
サンプルコード、設置方法、オプション設定も掲載しています。
■使い方
上記ボタンを押して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>