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を使って「glow」フィルタの「strength」(発光の強さ)の数値を増減させるようにすると、周囲のぼやけた範囲が変化するアニメーションの効果を出すことができます。ここでは、「strength」(発光の強さ)の数値を一定間隔で大きくし、用紙に文字周囲のインクがにじんでいくように表示させる方法を考えてみましょう。

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

 「glow」フィルタの「strength」(発光の強さ)の数値を一定間隔で徐々に大きく変化させるようにJAVA Scriptで定義します。

<!--
var a = 0
function nijimi(){
 if(a<12){
 niji.filters.glow.strength = a
 a = a + 1 }
 setTimeout("nijimi()",300);
}
// -->

■ レイヤーを使った背景色設定

上で定義した「strength」の数値を変更する関数をいつ実行するかを設定します。

<BODY onLoad="nijimi()" >

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

■ にじませる文字列と「glow」フィルタの設定

にじませる文字内容にIDとして名前をつけ、文字列の設定を行います。

<DIV ID="niji" STYLE="width:100%;font-size:38pt;color:#000000;font-weight:900;text-align:center;filter:glow(color=#808080,strength=10)">
<font face="MS P明朝, 細明朝体"><strong>道は一日にしてならず</strong></font><BR>
</DIV>

例では、「glow」フィルタの発光の強さをJAVA Scriptで増加させることで、ぼけた範囲を変化させています。このとき、「glow」フィルタの発光色(color)に、元の文字色と同じ色を設定してしまうと文字が潰れてよみにくくなってしまいます。文字周囲をにじんだように表現するには、文字色より薄い色を設定することがポイントです。

<<<戻る

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