© 2025 JWS

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

  • JavaScript
  • Animation

目次

  1. どんなものができるのか
  2. 使用ライブラリ紹介
  3. ディレクトリ構成
  4. HTML 実装例
  5. JS の実装
  6. まとめ

今回は、以前案件で一度利用したことがある、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 の実装

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

それを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>

まとめ

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

使う場面としては、

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

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

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

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

Share

Blogs