【トレビアン】CSSで画像が動いてるように見える!?

「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』も！
・女性が“あの日”であることを表している合図？
・あのブログが１周年を迎えた！　2年目はこんな記事が出る？

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