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では正しく表示されない場合があります)

JAVA Scriptを使って、IEで利用できる「wave」フィルタの属性を変化させると、アニメーションのような効果を出すことができます。ここでは、「wave」フィルタの「phase」(波の始まる位置)の動きを一定間隔で変更させ、文字列が波のようにゆらゆら揺らめくように表示させる方法を考えてみましょう。

■ 「wave」フィルタの属性の定義

ここでは「wave」フィルタの「phase」属性(波の始まる位置)の数値を一定間隔で変更させるようにJAVA Scriptで定義します。

<SCRIPT language="JavaScript">
<!--
function water(){
setInterval('yurayura.filters.Wave.phase+=10;',100)
}
//-->
</SCRIPT>

■ ゆらゆら揺らすタイミングの設定

上で設定した関数(「wave」フィルタの動きを変化させる)をいつ実行するかを設定します。

<BODY onLoad="water()">

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

■ 揺らす文字列と「wave」フィルタの設定

文字列に「yurayura」というIDをつけ、文字列の設定をします。

<DIV ID="yurayura" STYLE="position:absolute;left:167px;top:201px;font-size:35pt;font-weight:bold;color:#6666ff;filter:Wave(Freq=1,LightStrength=0,Phase=25,Strength=5)">Welcome to The WaterWorld</DIV>
例では、JAVA Scriptを利用して一定間隔で「wave」フィルタの「phase」(波の始まる位置)を変更することで、アニメーション効果を表現しています。間隔の速度は「setintervel」で指定し、数値を大きくすれば速度は遅くなり、数値を小さくすれば速くなります。ゆらゆら揺れているような動きをするには、100前後の数値を指定すると良いと思います。

<<<戻る

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