| ポイント |
<![CDATA[
function fadeInBG()
{
if (n < 0) return;
n -= 2;
myIMG.filters['alpha'].opacity = n;
setTimeout("fadeInBG()",100);
}
<body background="sample.gif" onLoad="fadeInBG()">
<img src="white.gif" id="myIMG" width="120%" height="120%" style="position:absolute;top:0px;left:0px;z-index:1;filter:alpha(opacity=100);">
]]>
|
| 説 明 |
ページが読み込まれたら背景画像をフェードインさせるにはimgタグを使って背景画像の上にマットとして敷いておきます。サンプルでは白い画像をブラウザの画面いっぱいに広げて背景画像を隠しています。この白い画像にスタイルシートで透明度を指定しておきます。スタイルの透明度を変化させ完全に表示される（または表示されなくなる）までsetTimeout()を使い定期的にフェードイン処理の関数を呼び出します。ページが読み込まれたらonLoadイベントが発生するので、これをbodyタグ内に書いておき、フェードイン処理を行う関数を呼び出します。これによりページが読み込まれたら背景画像がフェードインしているように見えます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>背景画像を少しずつフェードインさせる</title>
<script language="JavaScript"><!--
n = 100;
function fadeInBG()
{
if (n < 0) return;
n -= 2;
myIMG.filters['alpha'].opacity = n;
setTimeout("fadeInBG()",100);
}
// --></script>
</head>
<body background="sample.gif" onLoad="fadeInBG()">
<img src="white.gif" id="myIMG" width="120%" height="120%" style="position:absolute;top:0px;left:0px;z-index:1;filter:alpha(opacity=100);">
<br>
<div style="position:absolute;top:100px;left:0px;z-index:2">
背景画像が少しずつ現れます。（背景画像がフェードインします）
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
背景画像を少しずつフェードインさせる