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

Parallax Background with Javascript and CSS ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」。 一見なんの変哲もないサイトのように見えて、スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。 スクロールバーをつまんでゆっくりページをスクロールしてみてください。 雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえると思います。 JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節しているようです。 凄く面白いなぁ、と思ったのですが、この方法を応用することで、新たに面白い効果を作ることができるかもしれませんね。 訪問者への驚きの要素として実装してみると面白いでしょう。 サポートブ

[dreamily]

背景画像のスクロール速度を変える。IE6+

[lowtime]

js

[webmarksjp]

javascript

[vv_boow_vv]

　スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえる。

[adamrocker]

JavaScriptとCSSで背景画像を工夫する事で面白いエフェクトを実現しています。今まで見た事の無いエフェクトなのでクリッピング。具体的には、背景画像が２枚ある様に見え、奥と手前のスクロール速度を変えている。

[C_L]

べ、べつにうちのblogの背景スクロールはココを見てマネしたんじゃないからね！けっこうブラウザ毎に挙動違うんだよねー

[tks_period]

面白いとは思うけど、こういう繰り返し画像だとPageUp/Downで移動してると何も解らんな。使う画像をしっかり考えないと。

[hlkink]

これは面白い

[t_43z]

これは面白い。

[h_kmc]

おもしろい

[Leiu]

面白いー、けど言われないと気がつかない人も多そう