JSで画像のパラパラ漫画を5分で実装してみる

Title

Date

2019-07-09

どんなものができるのか

以下に作成したものを UP しますので、見てみてください。

https://korsmic.github.io/JWS-Blog/parapara/

使用ライブラリ紹介

rollerblade.jsというものを利用して実装を行います。

DL は以下の GitHub よりできます。

https://github.com/austenpayan/rollerblade

ディレクトリ構成

今回は以下のようなディレクトリ構成にします。

└─parapara
    file_list.txt
    img1.jpg
    img2.jpg
    img3.jpg
    img4.jpg
    index.html
    jquery-2.2.4.min.js
    rollerblade.min.js

HTML 実装例

HTML で JS を読み込みます。
パラパラ漫画を入れる要素を作り、id とclass="rollerblade"を付与します。
内部に初期の画像を一枚配置しておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>パラパラ漫画</title>
  </head>
  <body>
    <div id="target" class="rollerblade">
      <img src="./img1.jpg" alt="" />
    </div>
    <script src="jquery-2.2.4.min.js"></script>
    <script src="rollerblade.min.js"></script>
  </body>
</html>

JS の実装

まず、画像（パス指定）の配列データを用意します。

それをrollerbladeのimageArrayに入れてあげれば OK です！

<script>
  $(function () {
    // 画像の配列を定義
    var datas = ['./img1.jpg', './img2.jpg', './img3.jpg', './img4.jpg'];
    $('#target').rollerblade({
      drag: false, //ドラッグの設定
      auto: true, //自動的に動かす
      sensitivity: 125,
      imageArray: datas
    });
  });
</script>