NEW ARTICLE
gulp+webpack+jQuery+pug+sassで開発環境構築
  • JSで画像のパラパラ漫画を5分で実装してみる

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

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

こんにちは！

こっそり1週間に2本ペースでブログを更新していこうという目標を立ててみました。
100記事UPを目指して今日ももくもくと頑張ります。

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

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

まとめ

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

使う場面としては、

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

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

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

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

ポートフォリオ・お問合せはこちら

ポートフォリオサイト
お問合せはこちら