Parallax Background with Javascript and CSS

ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」。

一見なんの変哲もないサイトのように見えて、スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。
スクロールバーをつまんでゆっくりページをスクロールしてみてください。
雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえると思います。



JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節しているようです。
凄く面白いなぁ、と思ったのですが、この方法を応用することで、新たに面白い効果を作ることができるかもしれませんね。

訪問者への驚きの要素として実装してみると面白いでしょう。

サポートブラウザは、Safari, Firefox, IE6+, Opera となっているようです。

関連エントリ

• クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」
• CSSとJavaScriptによってFlashで作ったようなクールな動くメニューを作る
• CSSベースの超クールなナビゲーション集