JavaScriptで画像を分割アニメーション付きに切り替える

画像をバラバラ回転移動フェードアウトして順次アニメーション表示

画像を分割・回転・移動・フェードアウトさせながら切り替える、ちょっと変わったカルーセル風アニメーションをJavaScriptだけで実装できるライブラリ「mamImageSplitCarousel.js」を紹介します。
一般的なスライダーとは異なり、視覚的にインパクトのある演出が可能で、設置もシンプル。
ポートフォリオやLPなど、印象に残るUIを求める場面に最適です。

■使い方

mamimgsplit_carousel.js(7KB)ダウンロード
上記ボタンを押してmamimgsplit_carousel.jsをダウンロードします。
mamImageSplitCarouselを使いたいファイルで、
```
  <script src="./js/mamimgsplit_carousel.js"></script>
```
のように、相対又は絶対パスでmamimgsplit_carousel.jsを指定します。
クラス名に"mam-image-split-carousel"を指定したdivタグを設置します。
data-split属性に縦又は横方向の最大分割数設定します。
このdivタグの子要素にクラス名"mam-image-split-carousel-child"のdivラグを設置し、その子要素にaタグを設置し、その子要素にimgタグを設置します。
```
  <div class="mam-image-split-carousel" data-split="20" >
    <div class="mam-image-split-carousel-child">
      <a href="リンクする場合はURL1"><img src="画像URL1"></a>
    </div>
    <div class="mam-image-split-carousel-child">
      <a href="リンクする場合はURL2"><img src="画像URL2"></a>
    </div>
  </div>
```

■使用例

<div style="display:flex;">
  <div style="width:20%;"></div>
  <div class="mam-image-split-carousel" style="max-width:800px;width:80%;" data-split="20">
    <div class="mam-image-split-carousel-child">
      <a href=""><img src="./imgs/car1.jpg" style="width:100%;"></a>
    </div>
    <div class="mam-image-split-carousel-child">
      <a href=""><img src="./imgs/car2.jpg" style="width:100%;"></a>
    </div>
    <div class="mam-image-split-carousel-child">
      <a href=""><img src="./imgs/car3.jpg" style="width:100%;"></a>
    </div>
  </div>
  <div style="width:20%;"></div>
</div>