WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

CSSでのスゴ技「Román Cortés」

JavaScriptを一切使わずにCSSのみでの様々な演出を紹介している
「Román Cortés」がスゴいの一言。

まずはコーラの缶をスクロールバー操作によって回転させる技。

RomanCortesPureCSSCokeCan.jpg
Román Cortés » Pure CSS Coke Can

background-attachmentとbackground-positionのプロパティを利用して、
スクロール時に背景画像の切り替えをしているもよう。

動作環境:IE8, Firefox3.5, Opera10, Safari4, GoogleChrome3

続いて、CSSで3D表現

RomanCortesCSS3DMeninas.jpg
Román Cortés » CSS 3D Meninas

透過画像を重ね合わせCSSスプライトを利用して、
3Dの世界を表現しているもよう。

動作環境:IE8, Firefox3, Opera9, Safari3, GoogleChrome4

どちらも動きが滑らかで気持ちがいい。
使える使えないは別として、こういったものをJavaScriptやFlashを使わずに
CSSだけでやってしまう発想がスゴい。

ご参考までに。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です