アニメPNG画像 JavaScriptとCSSを使った疑似アニメーション画像の作り方 | 【task-bar】 渋谷で働くひよっこクリエイターのブログ
November 10, 2010 08:31:07

アニメPNG画像 JavaScriptとCSSを使った疑似アニメーション画像の作り方

テーマ:ON
かぜなどいじでもひくものか

こんにちは、たすくです。



【task-bar】 渋谷で働くひよっこクリエイターのブログ

先日、家で背景画像付きのGoogleの検索トップを見ていて、
ちょっと気になったことが。


【task-bar】 渋谷で働くひよっこクリエイターのブログ

なんだこれ?なんか動いてる。
「クリックすると今日のDoodle(ホリデーロゴ)を表示します」だそうです。


どんな風にやってるんだろう、と思ってCSSを調べたら・・・


(※↓長すぎるので小さくしています。実際は28px×2856px。)
$【task-bar】 渋谷で働くひよっこクリエイターのブログ
長いパラパラマンガだ!

Firebugを見てみると、CSSの数字が増えたり減ったりしてる。




要するに、CSSの背景画像の位置をいじって、
疑似アニメーション画像を作ってる
みたいな感じだとわかったわけです。




難読化されてるJSを読む気はしなかったので、自分で作ってみることにしました。


縦長のpng画像 (50px×400px)

【task-bar】 渋谷で働くひよっこクリエイターのブログ



参考までに、アニメgifでも書き出してみた。(50px×50px)

【task-bar】 渋谷で働くひよっこクリエイターのブログ




CSS
#hoge{
display:block;
width:50px;
height:50px;
background:url(anime_part.png) no-repeat top;
text-indent:-9999px;
}


JavaScript
var el; //対象のエレメント
var h; //エレメントの高さ
var i = 0; //Loopごとに1増える
var imgNums = 8; //画像のコマ数

function onLoad(){
el = document.getElementById("hoge");
h = el.offsetHeight;
loop();
}

function loop(){
el.style.backgroundPosition = "left "+ -1 * h * i + "px";
// ↑"left -50px","left -100px","left -150px"...となっていく

i++;
if(i > imgNums-1)
i=0;

setTimeout("loop()",100);
}


まぁ、要するに、setTimeoutを使って1コマ分背景画像をズラしてあげるわけです。


はい、できあがったのがこれです。

【task-bar】 渋谷で働くひよっこクリエイターのブログ
じゃーん
(静止画なのでわからないと思いますが、動いています。)


どっちも変わんないじゃん、と思うかもしれないですが、
背景色をつけてみると・・・

【task-bar】 渋谷で働くひよっこクリエイターのブログ
じゃーん!pngの方がキレイ!!



つまり、Googleの検索窓の背景画像は、人それぞれ色んな画像が入るわけで、
透過gifなんかを使っちゃうと、どうしてもカビガビしてしまう
わけですね。

そこで、透過png画像を使いたいけど、pngではアニメーションができない。
だから、JSを使ってアニメーションさせてるのだと思います。


画像自体のファイルサイズはこんな感じです。
$【task-bar】 渋谷で働くひよっこクリエイターのブログ




使い道はあんまり思い付かないけど、なんか面白いものが作れてよかったなー。


たすくさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

コメント

[コメントする]

Ameba人気のブログ

Amebaトピックス