背景画像のスクロール方向やスピードを自由に変えるスクリプト

どうでしょう？雪が降っているように見えるかな？

解説

scrollTopを取得して、スクロール量に応じた背景画像のポジションを決めているだけです。

確認ブラウザ

IE6&7　Firefox2&3　Opera9　Safari2&3

参考サイト

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

背景画像提供

フリー素材集　壁紙工房　Giggurat

スクリプトとスタイルシート

JavaScript

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"
　　}
}

CSS

body {
　　background: url(img/snowback.gif) fixed;
}

問題点

雪が舞い上がる？

よほどの吹雪でない限り雪は下から上に降ることはないのだが、上方向にスクロールすると雪も上に昇っていってしまう。

スクロール方向を取得するスクリプトはないだろうか？

if (スクロール方向 = 上)　こんな感じのが欲しいね。

処理スピード

パソコンの性能にもよるが、さすがに処理スピードが遅くなってくる。特に透過・半透明画像を多く使うと、処理が追いつかなくなってくるブラウザもある。

Safari＞＞IE6&7＞＞＞Firefox2＞Opera9の順かな。Firefox3(Beta)も遅かった。

このページはCSSでブログデザイン 背景画像のスクロール方向やスピードを自由に変えるスクリプト内のフレームで使用しています。