rollerblade.js
画像を自動で切り替えてパラパラ漫画が実装できるプラグイン「rollerblade.js」を紹介します。
公式には「ドラッグで動かせる画像を簡単に作れるプラグインだよ！商品画像を360度回転とかで見せられるよ！」的なことが書いてありますが、個人的にはパラパラ漫画が簡単に作れるって方が魅力的なプラグインです。
ページのちょっとしたアクセントとして使うと楽しそう。gifアニメでは出来ないアルファのあるアニメで何か出来ないかなー。
用意するもの
用意するものは、公式からダウンロードするrollerblade.min.jsとjquery、あとはパラパラさせたい画像の用意です。画像の用意が一番手間かかるかもしれません。
<script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script type="text/javascript" src="rollerblade.min.js"></script>
基本的な書き方
使い方は、まずhtmlの方はパラパラさせたい画像にrollerblade-imgクラスをふって、任意のIDのdivで囲むだけです。
<div id="target">
<img class="rollerblade-img" src="images/frame01.jpg">
</div>
jsの方の記述は、まずパラパラさせる画像のurlを配列にまとめて、それを任意ID.rollerbladeに指定するだけで動きます。
オプションを簡単に紹介すると、
「imageArray」は文字通り画像URLの配列を指定する、
「sensitivity」はドラッグに対して何枚パラパラさせるかの感度の指定、
「drag」はドラッグで動かすかどうか（falseだとmousemoveで動くようです）、
「auto」はドラッグやマウスオーバーがなくてもアニメーションを動かすかどうか、
「edgeStop」はループさせるかどうか、のようです。詳しくは公式を確認してみてください。
var arrayOfImages = [
'images/frame01.jpg',
'images/frame02.jpg',
'images/frame03.jpg',
'images/frame04.jpg'
];
$("#target").rollerblade({
imageArray: arrayOfImages,
sensitivity: 35,
drag: true,
auto: false,
edgeStop:false
});
パラパラ漫画させようと思ったら結構な画像数になると思うので、配列は手動で書くよりもfor文とかで自動に入れちゃった方が楽な気がします。
以上、参考になれば。
