ゲストさんログイン

ウェブ検索

最新ニュース! クリックするほどよく分かる

[PR]免許はあるけど車は持たない方へ

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

2008年06月16日13時20分 / 提供:トレビアンニュース

トレビアンニュースRSSファイル
【トレビアン】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』も!
女性が“あの日”であることを表している合図?
あのブログが1周年を迎えた! 2年目はこんな記事が出る?

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

トレビアンニュース
関連ワード:
トレビアン  CSS  アニメ  アクセス  CM  
Ads by Google
コメントするにはログインが必要です
ログインしてください
投稿

関連ニュース:トレビアン

ITアクセスランキング

注目の情報
アフラックの代理店制度のご案内
開業資金や経験はいりません!自宅を拠点に独立してみませんか。
開業前の研修充実。仕事はアフラックが全面的にバックアップします。
全国で1万8000人以上の方がイキイキと活躍しています。


代理店募集サイトが新オープン

ヘッドライン

東芝、業界最大320GBの1.8型ハードディスクを量産へ 東芝、業界最大320GBの1....
東芝は2009年11月05日、小型・軽量・低消費電力で、耐衝撃性と耐振動性にすぐれた1.8型ハードディスク(HDD)の新商品として、シリアルATAインターフェース採用

写真ニュース

【月間ランキング】2009年10月のアキバ総研ホビー系人気記事トップ10 工作感覚で作ろう!お手軽なロボット教材キット【ロボマニア】 女子大生が『mixi』で飲酒運転と警察の検問突破を告白 市橋達也容疑者がコラージュ画像でイチハシーマン
「フェンダー人類奏者計画」!?  綾波レイがギターに・・・ 「壊した車の数は世界一!」 映画版「G.I.ジョー」DVD発売 オバマ大統領が天気予報を教えてくれるサイト 電力のムダ見つけ、節約する「制御システム」開発
幸せの黄色いUSBメモリー!? THE漢字『幸福USBメモリー』発売 人気を博したWii版『ディシプリン*帝国の誕生』の新作発売決定!! 現役高校生が『mixi』で無免許運転を告白 「温感機能」搭載した美顔器

特集

ケータイでニュースを見る
QRコード 行きの電車、帰りの電車で
livedoorニュースを読もう!
ケータイにメールを送る
livedoor サービス: