Javascriptで1つの画像が分割されバラバラに回転移動しながらフェードアウトするアニメーション ~ 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>