画像が波打つように表示する

IE5.0以降のみ（Macintosh版IE5.0では正しく表示されない場合があります）

「wave」フィルタを使うと、画像に歪みを作ることができます。ここでは、写真がゆっくりと波打つように見える効果を設定する方法を考えてみましょう。

■　画像に「wave」フィルタを設定

スタイルシートを使って、画像に「wave」フィルタを設定します。

<IMG ID=img1 SRC="../../assets/images/wave.jpg" WIDTH="590" HEIGHT="400" STYLE="filter:Wave(Add=1,Freq=7,LightStrength=60,Pase=100,Strength=2)">

■　波の位置を変更する関数の設定

JAVA Scriptを使って、波頭の位置（位相）を少しずつ変更する関数を記述します。

<SCRIPT LANGUAGE="JavaScript">
<!--
var move=100;
wave();
function wave(){
img1.filters[0].phase=move;
move=move-2;
if(move<=0){
move=100;
}
window.setTimeout("wave()",100);
}
//-->
</SCRIPT>

例では、「wave」フィルタを使って画像に歪みを作ることで、画像が波打っているように表示しています。このスクリプトでは「wave」フィルタの「phase」（波の位置）の値を書き換えて、画像のゆがんでいる位置を少しずつ移動するのがポイントです。このとき「wave」フィルタのパラメータは、次の書式で設定します。

STYLE="filter:Wave(歪みの方法, 波の数の指定, 光の強さの指定, 波の位置の指定, フィルタの強さの指定)"

<<<戻る