IE5.0以降のみ（Macintosh版IE5.0では表示されない場合があります）
JAVA Scriptを使ってスタイルシートに設定した文字列を移動させることで、文字列を自在に動かすことができます。ここでは、この方法を利用して、画面に表示されているタイトル文字の背後に画面の外側から徐々に色違いのタイトル文字が重なってくるように表示させる方法を考えてみましょう。
スタイルシートで指定する文字列の移動方向と速度をJAVA Scriptで定義します。
function move1() {
var word1 = w1.style.pixelTop
if(word1 < 303) {
w1.style.pixelTop = w1.style.pixelTop + 1
setTimeout("move1()",10)
}
}文字列の位置を変数「word1」に設定します。次に「もし上方向の位置が210ピクセルより小さかったら」という条件分岐処理をし、条件に合ったら位置を1ピクセルずつ移動します。「setTimeout()」プロパティでは、文字を移動する速度を設定しています。表示する文字の色を設定します。
<STYLE TYPE="text/css">
.text1 {
position:absolute;
font-family:Times New Roman;
font-size:38pt;
font-weight:bold;
color:#6b8e23;
width: 1101px;
height: 62px;
}
.text2 {
position:absolute;
font-family:Times New Roman;
font-size:38pt;
font-weight:bold;
color:#ffa500;
width: 1100px;
height: 62px;
}
</STYLE>例では、画面に止まっているように表示する文字列の色はオレンジ色、移動する文字列の色は緑色を指定し、共に表示位置の基準は「absolute」、文字フォントは「Times New Roman」、フォントサイズは38ポイント、太字に設定しています。上で定義した文字列を移動する関数をいつ実行するかを設定します。
<BODY onLoad="move1();>例では、ホームページを読み込んだタイミングで実行するように設定しています。
表示する文字列の色や位置と内容を設定します。
<DIV ID="w1" CLASS="text1" STYLE="left:45px;top:201px" >Welcome to Shirley's Pettit Case!</DIV>
<DIV CLASS="text2" STYLE="left:48px;top:304px">Welcome to Shirley's Pettit Case!</DIV>例では、移動する文字内容には「w1」というIDをつけ、画面左から45ピクセル、上から201ピクセルの位置に設定しています。また、固定表示の文字列は、左から48ピクセル、上から304ピクセルの位置に設定しています。
例では、スタイルシートで色違いの文字列を設定し、１つの文字列を徐々に動かす動作をJAVA Scriptで定義することで、段々重なっていくタイトルを表現していますが、移動させる文字列を画面外側から出現させるにはページを読み込んだ時点での文字を「-（マイナス）」の位置に配置しておくことがポイントです。このとき、指定する数値は、文字のフォントサイズによって異なるため色々試して見ると良いでしょう。例では、文字の配置位置（STYLE）の「left」に3ピクセル違う値を設定しているため、背後に影のようにずれて重なります。移動してくる文字列を最終的にぴったり重ねるには「left」に同じ値を指定することがコツです。
