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

Title

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

Date

2019-07-09

今回は、以前案件で一度利用したことがある、JS でパラパラ漫画風の表現をするライブラリと使い方をご紹介しようと思います。

サクッとできるので、手間もほとんど掛かりません。

どんなものができるのか

以下に作成したものを 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 の実装

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

それをrollerbladeimageArrayに入れてあげれば OK です!

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

まとめ

非常に少ない記述量でパラパラ漫画を実装できます。

使う場面としては、

  • 動画としては重い
  • ランダムで画像を入れ替えたい
  • gif だと汚い

なんて時に使えるかなと思います。

ちなみに、案件で 200 枚ぐらい画像を突っ込んで実装してみましたが、問題なく動作したので、大量の画像でも大丈夫そうです。

たとえば、画像 1 と画像 2 の間はちょっと長めにするという場合にはこのライブラリではできないので、tweenmaxなどを使いましょう。

制作パートナー(外注)をお探しの制作会社様・広告代理店様

お気軽にお問い合わせください。