Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 文字をトランジション効果で切り替える

IE5.0以降のみ(Macintosh版IE5.0では表示されない場合があります)

IEの「revealTrans」フィルタを利用すると、画像や文字列を表示したり切り替える際にアニメーションのようなトランジション効果を表現することができます。ここでは、「ホームページを読み込んだ時に表示された文字列が、自動的に市松模様を表示しながら違う文字列に切り替わる方法を考えてみましょう。

■ 文字列の切り替えの設定

 トランジション効果を利用するには「revealTrans」フィルタの設定をJAVA Scriptで定義します。

<SCRIPT LANGUAGE="JavaScript">
<!--
function change() {
 word.filters.revealTrans.apply()
 word.innerText = "HOW ARE YOU DOING?"
 word.filters.revealTrans.play()
}
//-->
</SCRIPT>

■ 文字を切り替えるタイミングの設定

上で定義したフィルタの実行をする関数をいつ実行するかを設定します。

<BODY onLoad="change()" >

ここでは、ページを読み込んだタイミングで実行するように設定しています。

■表示する文字列と「revealTrans」フィルタの設定

文字の表示の設定と、トランジションの種類とその処理時間を設定します。

<DIV ID="word" STYLE="width:100%;font-size:50pt;font-family:Times New Roman;font-weight:bold;color:#CC0066;text-align:center;filter:revealTrans(transition=10,duration=5)">WELCOME!!</DIV>

■ 「revealTrans」フィルタ

「revealTrans」フィルタは、JAVA Scriptによって【フィルタの呼び出し】→【切り替え後の文字列】→【フィルタの実行】の順でコントロールされます。
例では、10番のトランジション(市松模様を交差させながら切り替わる効果)を利用していますが、「revealTrans」フィルタには、下のような24種類の変化方法が用意されています。

transition
説明
0
Box in 四角く中央に向って切り替えます。
1
Box out 四角く中央から外に向って切り替えます。
2
Circle in 円形に中央に向って切り替えます。
3
Circle out 円形に中央から外に向って切り替えます。
4
Wipe up 下から上へと切り替えます。
5
Wipe down 上から下へと切り替えます。
6
Wipe right 左から右へと切り替えます。
7
Wipe left 右から左へと切り替えます。
8
Vertical blinds 縦のブラインドを開くように切り替えます。
9
Horizontal blinds 横のブラインドを開くように切り替えます。
10
Checkerboard across 横のチェック模様に切り替えます。
11
Checkerboard down 縦のチェック模様に切り替えます。
12
Random dissolve ランダムに分解して切り替えます。
13
Split vertical in 左右から中央に向って切り替えます。
14
Split vertical out 上下から中央に向って切り替えます。
15
Split horizontal in 上下から中央に向って切り替えます。
16
Split horizontal out 中央から上下に向って切り替えます。
17
Strips left down 右上角から左下角に向って切り替えます。
18
Strips left up 右下角から左上角に向って切り替えます。
19
Strips right down 左上角から右下角に向って切り替えます。
20
Strips right up 左下角から右上角に向って切り替えます。
21
Random bars horizontal ランダムに横線を入れて切り替えます。
22
Random bars vertical ランダムに縦線を入れて切り替えます。
23
Random 効果をランダムに切り替えます。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box