以前に書いた記事で作ったパラパラマンガ用JSライブラリ「Flipbook.js」。パラパラする部分はimgのvisibilityを切り替える仕様だったのだけど、やっぱ早いは正義なのかなと思ったのでスプライトシートを背景画像に使ってbackground-positionをずらす仕様に作り変えてみた。
仕様が変わったことで以前のバージョンと同じ取り回しでは動かなくなっちゃったけどまあ別にいいよね。ついでと言ってはなんだけど1枚のスプライトシートで複数パターンのアニメーションをさせるための機能(setPos())などを追加してみた。
注意したいのが、スプライトシートがあまり大きくなるとiPhone(iPod) Safariでは制限に引っかかって画像が一切表示されなくなること。そういう意味では以前の仕様のままでも良かったのかなーと作り変えた後に思ったり。ま、いいか。
デモや使い方は以下より。
(※上述の理由によりデモ部分はiPhone Safariで表示されません)