とってもシンプルに背景画像を横スクロール - [k]id東京都世田谷区　ホームページ制作　[k]id

とってもシンプルに背景画像を横スクロール

Category CSS,JavaScript　Update 2009.05.26

twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

IE7も広く普及し、ようやくPNG画像で透過背景や透過画像を扱えるようになったのでは
ないでしょうか。

CSS background- imageで指定した大空の背景を
JavaScriptで横に動かすスクリプトを作ってみました。

若干 FireFox対応で躓いたのでメモとして残しておきます。

↓これを
kumo

サンプル
↑こんな感じでぐるぐる回します。

ソースは

headに

<script language="JavaScript">
<!--
//----------------------------------------------------------------------
//                                         画像を右に移動させるスクリプト
var W=0;
var X=0;
function moveBG()
{	
	if(navigator.userAgent.indexOf("Firefox") != -1){//FOXブラウザの場合
	var H = 0; 
	alert('aa');
	document.body.style.backgroundPosition =  W+" "+H;
	}else{//それ以外のブラウザの場合
	document.body.style.backgroundPositionX = X++;
	}
	W++;
	//ループ対処
	setTimeout("moveBG()",100);
}
// -->
</script>

bodyに

<body onLoad="moveBG();">

でok!

ページトップへ