岩家.net

はじめに

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…）
CSS Spriteを活用しよう - DesignWalker

DesignWalker さんのこのエントリを読んで以来，似たような素材については CSS Sprite な手法を心がけています （実際にはそれ以前もナビゲーションの素材くらいには使ってましたが，最近はもうちょっと積極的に，という意味で）．

ここ数日，CSS + JavaScript で何か小ネタがないかなぁ．．．と少しだけ悩んでいたわけですが，そんな中で出てきたのが CSS Sprite を使ったアニメーションという短絡的なものでした．

では以下，何番煎じとかは気にしない方向で．

デモ

次のページにデモを上げていますので，よろしければ．各種ソースコードも載せてあります．

CSS Sprite + setInterval で簡易アニメーション - issm’s…

手抜きな解説

画像

アニメーションの全フレームを連結した 1つの画像を準備します．

CSS

準備した画像を背景に設定します．overflow: hidden しておくといいでしょう．

アニメーションの各フレームに対応したクラスを

.frame-1 { background-position: ...px ...px; }

のような感じで定義していきます．

JavaScript

setInterval 関数を使って定期的にフレームを変更します．フレームの変更は，先で定義したクラス名を設定することで行います．

target.className = 'frame-1';  // ホントは replace とか使うべき

おわりに

フレーム数（コマ数）が莫大にならなければそれなりに使えるのかな，なんて個人的に思ってみました．APNG や MNG が普及するまで （といっても現状知りませんが ＞＜） は，代替手段として利用してみるとします．

利用幅を広げるために，JavaScript の IE への対応が最初の課題ですね．そして透過PNG対応も （この辺は PNG Fix とかで）．

あとは，フレーム定義の CSS （background-position 設定ね）なんかを画像から判断して自動で吐き出すようなしくみなんかができるとかなりハッピーですね．

参考

デモページの画像は，以下の動画から使わせていただきました．

• たわしねこ2　荒ぶるたわしのポーズ‐ニコニコ動画(夏)
• もやしもんでｳｯｰｳｯｰｳﾏｳﾏ(ﾟ∀ﾟ)‐ニコニコ動画(夏)