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を使って、「wave」フィルタの「strength」(波の振動幅)の数値を徐々に現象させていくと、少しずつ形を整えていくアニメーションの効果を出すことができます。ここでは、大きく指定した「strength」(波の振動幅)の数値を少なくしていって、文字列が徐々に形成されるよう表示させる方法を考えてみましょう。

■ 「wave」フィルタの属性の変更

「wave」フィルタの「strength」(波の振動幅)の初期値を100にし、一定の間隔で徐々に減らして最終的に0になるようにJAVA Scriptで定義します。

<SCRIPT LANGUAGE="JavaScript">
<!--
title="Shirley's Pattit Case";
a=0
function moji(){
 if(a<=title.length){
 f=title.substring(0,a);document.all.wordstart.innerHTML=f;
 a++;}
 else{a=0
 }
 setTimeout("moji()",300);
}
//-->
</SCRIPT>

■ 文字の形を変更するタイミングの設定

上で設定した関数(振動幅の数値を少しずつ減らす)をいつ実行するかを設定します。

<BODY onLoad="yugami()">

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

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

表示する文字内容にIDとして名前をつけ、文字と「wave」フィルタの設定をします。

<DIV ID="fusion" STYLE="width:100%;font-size:60pt;font-family:Arial;color:#ffffff;font-weight:bold;text-align:center;filter:wave(freq=10,lightatrength=0,phase=100);">
WELCOME</DIV>
「wave」フィルタの属性「strength」は関数で変化させるため、ここでは属性指定をしないことがポイントです。
「wave」フィルタの「strength」(波の振動幅)の数値を大きくすると、設定元の形が短い線分でバラバラになったように表示されます。例では、この特徴を利用して「strength」(波の振動幅)の数値「100」を一定間隔で「1」ずつ減少し、徐々に文字列のばらけを小さくしていくことで元の文字の形に近づけています。
このとき、「strength」(波の振動幅)が原書させる単位で割り切れる数値でないと、文字列の表示が途中で終わってしまうので注意が必要です。

<<<戻る

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