Javascriptで画像バラバラに回転移動フェードアウトするアニメーション ～ mamImageSplit.js
■使い方
上記ボタンを押して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>