Parallax Background with Javascript and CSS

« back to inner.geek Parallax Backgrounds a multi–layered javascript experiment This work is licensed under a Creative Commons Attribution 3.0 License. First of all, try scrolling up and down thing page. Use your scroll wheel, use the scroll bar, use the arrow keys, page up, page down, space bar. Note how the text scrolls normally, but the green background scrolls slowly, and how the clouds scroll

[helldeath]

縦スクロールのパララックス

[Biz-R]

スクロールと背景画像

[franz_liszt]

この見え方すごい！

[qland]

2枚の背景画像がスクロールに応じて別々の速度で移動するスクリプト

[bigchu]

: parallaxBackgroundsと呼ばれる。

[kanehama]

背景画像を動かすことにより遠近感をだす

[erf]

背景画像とbody内コンテンツのスクロールに差をつけるスクリプト。

[ricebread]

背景が多重スクロールする。いいね！

[picnicgraphic]

「スクロールしてみると2枚の背景画像が違う速度でスクロール/JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節/サポートブラウザは、Safari, Firefox, IE6+, Opera/via*phpspot開発日誌」

[mysato]

[js]

[Fsiki]

一瞬何が起こってるのかわからなかったが、背景が珍妙に動くらしい。

[lomo_lomo]

背景とテキストが異なった速度でスクロールする(マルチレイヤー)

[wacky]

ページの背景が多重スクロールする視覚効果をJavaScript + CSSで実現。Creative Commons Attribution 3.0 License。（→ 日本語解説： http://youmos.com/news/parallax_backgrounds.html ）

[cinnabar]

多重レイヤー