Maccle

GoogleのロゴがCSS3+JSで作られた「夢の国のリトル・ニモ」のアニメーションになってる件

October 15, 2012
約 2 分
GoogleのロゴがCSS3+JSで作られた「夢の国のリトル・ニモ」のアニメーションになってる件

いやぁー、最近かなり忙しくて全く更新ができていません。。反省!

さっき、何気にGoogleで調べようとしたら、何と10月15日のホリデー・ロゴが「夢の国のリトル・ニモ」になってましたよ!
この作品は、アメリカのウインザー・マッケイというアニメーターの週刊連載漫画だそうで、本国ではかなり有名な方のようです。

今回のロゴはこの「リトル・ニモ」の出版107周年を記念してのものだそうです。

このロゴ、漫画調のアニメーションになっていてロゴ右下の矢印マークをクリックすると、下に続きのアニメーションがびよーんと現れてニモの冒険を楽しめます。

で、何がすごいかって、このロゴはCSS3とJavascriptでゴリゴリに作られているんです!
もちろん、googleがFLASHなんかで作る訳がないっ

素材となるアニメーション用の画像は、部品化された絵が1枚に描かれていて、たぶんCSSスプライトとJavascriptでアニメーション化してるっぽい。

素材に使っているイメージはこんな感じ↓

興味ある方は、ChromeかFireFoxの「Web Developer」プラグインで「要素の検証」機能を使ってこのロゴをみてみると面白いですよ〜。

うーん、とはいえ、なぜ107周年?!
普通、100周年、110周年とかのキリのいい数字ならわかるんですが。。

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Leave A Reply

*

Comment On Facebook