JSで画像のパラパラ漫画を5分で実装してみる
今回は、以前案件で一度利用したことがある、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
などを使いましょう。