twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > BG Scroll

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番目のパラメータが縦方向へのスクロールドット数、最後のパラメータが処理タイミング(ミリ秒)となります。