BG Scroll
このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。
指定した要素の背景画像をスクロールさせるアニメーションを実現するためのDynamicHTML(DOM+JavaScript)です。サンプルではP要素の背景画像で行なっていますが、BODYの背景画像もスクロールさせることはできます。スクリプトはscriptフォルダにあるものとして記述しています。
Sample
スクロールしています。
<p id="bgscroll" style="background-image:url(/img/old/yabuki.png); width:auto; height:80px;"><span style="color:white; background-color:blue;">スクロールしています。</span></p>
ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。そして使用する画像にあわせて画像のurlを換えておきます。
<SCRIPT type="text/javascript" src="script/bgscroll.js"></SCRIPT>
ここからスクリプトをファイルに保存して、<HEAD>～</HEAD>内に上記のように記述してスクリプトを読み込ませます。
<BODY onload="bgScroll('bgscroll',0,0,28,14,2,1,100);">
スクリプトは<BODY>のonload属性で実行します。最初のパラメータが指定したID名で、2番目のパラメータが背景画像の初期X座標、3番目のパラメータが背景画像の初期Y座標、4番目のパラメータが背景画像の横幅、5番目のパラメータが背景画像の縦幅、6番目のパラメータが横方向へのスクロールドット数、7番目のパラメータが縦方向へのスクロールドット数、最後のパラメータが処理タイミング（ミリ秒）となります。