この馬が動き出す!

写真拡大

「CSSを使って画像をアニメーションさせる」というトンデモ技術を駆使したデモを置いているサイトがある。
こちらのサイトにFirefoxでアクセスしてほしい(InternetExplorer6未対応)。

ページを開いたらブラウザの幅を変えてみよう。

何か変化が起きたのがわかるだろうか?

そう、馬がアニメーションしているのだ。これはCSSにより2枚の画像を重ね上にゼブラ状の画像を、その下に馬の画像を置いている。

もっとわかりやすいカラクリは、下記の動画を見て頂ければいい。

こちら『MAGIC MOVING IMAGES』といって、アマゾンなどでも購入できる面白い小冊子なのだ。
実物は歯車が回ったりと、いろいろなアニメーションが堪能できるものとなっている。

このサイトは、その本を応用した物といえるだろう。
ソースも公開されているので、自分の好きな画像をアニメーションさせてみてはいかがだろうか?

参照:A parallax optical illusion with CSS: The Horse in Motion(Firefoxでアクセスしてください)



■オススメ! 最新人気トレビアンニュース
3の倍数になるとアホになる『ナベアツ.in』
予告in、予告outに続いて『予告.off』までも……
『メタルギアソリッド4』売り上げ今ひとつ……
犯罪予告を検知する『予告in』が激安完成! 『予告out』も!
女性が“あの日”であることを表している合図?
あのブログが1周年を迎えた! 2年目はこんな記事が出る?

トレビアンニュース記事をもっと見る!

トレビアンニュース