scrollTopを取得して、スクロール量に応じた背景画像のポジションを決めているだけです。
IE6&7 Firefox2&3 Opera9 Safari2&3
ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」:phpspot開発日誌
window.onscroll = function() {
var imgH = 800 // 背景画像の高さ
var speed = -8 // スクロールスピード
// 数値(絶対値)が小さいと早く、大きいと遅くなります。
// 正の値で順方向、不の値で逆方向にスクロールします。
if (navigator.vendor == "Apple Computer, Inc.") {
var posY = window.pageYOffset
}
else {
if (document.documentElement.scrollTop) {
var posY = document.documentElement.scrollTop
}
else {
var posY = document.body.scrollTop
}
}
if (speed != 0) {
var backposi = imgH - (Math.floor(posY / speed) % (imgH + 1))
document.body.style.backgroundPosition = "0 " + backposi + "px"
}
}
body {
background: url(img/snowback.gif) fixed;
}
よほどの吹雪でない限り雪は下から上に降ることはないのだが、上方向にスクロールすると雪も上に昇っていってしまう。
スクロール方向を取得するスクリプトはないだろうか?
if (スクロール方向 = 上) こんな感じのが欲しいね。
パソコンの性能にもよるが、さすがに処理スピードが遅くなってくる。特に透過・半透明画像を多く使うと、処理が追いつかなくなってくるブラウザもある。
Safari>>IE6&7>>>Firefox2>Opera9の順かな。Firefox3(Beta)も遅かった。
このページはCSSでブログデザイン 背景画像のスクロール方向やスピードを自由に変えるスクリプト内のフレームで使用しています。