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()" >ここでは、ページを読み込んだタイミングで実行するように設定しています。
文字の表示の設定と、トランジションの種類とその処理時間を設定します。
<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」フィルタは、JAVA Scriptによって【フィルタの呼び出し】→【切り替え後の文字列】→【フィルタの実行】の順でコントロールされます。
例では、10番のトランジション(市松模様を交差させながら切り替わる効果)を利用していますが、「revealTrans」フィルタには、下のような24種類の変化方法が用意されています。
値 transition 説明
0Box in 四角く中央に向って切り替えます。 1Box out 四角く中央から外に向って切り替えます。 2Circle in 円形に中央に向って切り替えます。 3Circle out 円形に中央から外に向って切り替えます。 4Wipe up 下から上へと切り替えます。 5Wipe down 上から下へと切り替えます。 6Wipe right 左から右へと切り替えます。 7Wipe left 右から左へと切り替えます。 8Vertical blinds 縦のブラインドを開くように切り替えます。 9Horizontal blinds 横のブラインドを開くように切り替えます。 10Checkerboard across 横のチェック模様に切り替えます。 11Checkerboard down 縦のチェック模様に切り替えます。 12Random dissolve ランダムに分解して切り替えます。 13Split vertical in 左右から中央に向って切り替えます。 14Split vertical out 上下から中央に向って切り替えます。 15Split horizontal in 上下から中央に向って切り替えます。 16Split horizontal out 中央から上下に向って切り替えます。 17Strips left down 右上角から左下角に向って切り替えます。 18Strips left up 右下角から左上角に向って切り替えます。 19Strips right down 左上角から右下角に向って切り替えます。 20Strips right up 左下角から右上角に向って切り替えます。 21Random bars horizontal ランダムに横線を入れて切り替えます。 22Random bars vertical ランダムに縦線を入れて切り替えます。 23Random 効果をランダムに切り替えます。