前の記事 ≪:JavaScriptコードをブックマークレットに変換するPerlスクリプト「JavaScrip...
次の記事 ≫:特定ワードを猫画像にして分析してくれるツール「にゃんにゃん分析...

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

2007年03月23日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法

Parallax Background with Javascript and CSS

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

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



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

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

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

関連エントリ

関連の記事検索:CSS, JavaScript, 背景, Webデザイン, Web制作
スポンサード リンク

By.KJ : 2007年03月23日 07:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)