自分で書いて，しくみを理解！
今回も，前回に引き続き，IE4.0以上で動作する，ビジュアルフィルタについて見ていきましょう。ビジュアルフィルタの種類については本連載第8回の表1を参照してください。
今回は，ビジュアルフィルタの，Alpha，Shadow，DropShadow，Blurを取り上げます。また，最後にTIMEを使ったサンプルも見ていきます。
影付きのグラデーション(AlphaとShadowフィルタ)
まずは，使用頻度の高い，AlphaフィルタとShadowフィルタの組み合わせです。ボタンをクリックすると，影が付いてグラデーションのかかった文字列が，ふわーっと浮き上がってきます。本連載の第3回で紹介した「文字列のフェードイン・フェードアウト」と処理は似ていますが，今回は文字に影が付き，グラデーションがかかっている点が異なります。実行画面は図1のようになります。
図1● 影付きでグラデーションのかかった文字列が表示されます
リスト1●「影付きのグラデーション(AlphaとShadowフィルタ)」のソースコード／Internet Explorer限定（こちらからソースコードをダウンロードできます）
～XHTML宣言略～
<script type="text/javascript">
<!--
var timer1;
var no;
//ボタンがクリックされたときの処理
function begin(){
no=0;
timer1=setInterval("goappear()",20);
}
//「PROJECT KySS」という文字列が浮き上がるように表示される処理
function goappear(){
if (no>=90){
clearInterval(timer1)
no=90;
document.getElementById("moji").style.filter=
"alpha(opacity=90,style=3) shadow(color=gray,direction=45)";
return(0);
}
else{
document.getElementById("moji").filters.alpha.opacity=no;
no++;
}
}
//-->
</script>
<style type="text/css">
<!--
～略～
.sample{
font-family : Verdana;
font-size : 30pt;
color : red;
filter : alpha(opacity=0,style=3) shadow(color=gray,direction=30);
width : 500px;
cursor : hand;
margin-top : 20;
font-weight : bold;
}
-->
</style>
</head>
<body>
<h1>文字の影付きグラデーション</h1>
<div id="moji" class="sample">PROJECT KySS</div>
<button style="cursor:hand" onclick="begin()">出よ</button>
</body>
</html>
XHTML内の<div>要素の内容に，文字列「PROJECT KySS」を指定して，id名をmojiとしています。class属性にエンベデッドスタイルシートのsampleを指定します。.sampleエンベデッドスタイルシート内では，filterにalphaとshadowフィルタを指定します。
Alphaフィルタの書式については，本連載第3回の「文字列のフェードイン・フェードアウト」を参照してください。またshadowフィルタの書式については，第8回の「Waveフィルタ処理」を参照してください。エンベデッドスタイルシート内ではwidthを指定することを忘れないようにしてください。widthを指定しなければフィルタは正常に動作しません。
filter : alpha(opacity=0,style=3) shadow(color=gray,direction=30); width : 500px;
次に，XHTML内の<button>要素のonclickイベントで，beginプロシジャを実行します。beginプロシジャ内では，タイマーを使って，goappearプロシジャを20ミリセコンド毎に実行します。
timer1=setInterval("goappear()",20);
goappearプロシジャ内では，変数noの値を1ずつ増加させます。noの値が90になれば，タイマーを解除します。
<div>要素の「PROJECT KySS」という文字列には，alphaとshadowフィルタを指定します。alphaフィルタの透明度を90に指定し，styleに3を指定して，勾配の形状を長方形としています。このstyleの形状については，第3回の「「文字列のフェードイン・フェードアウト」で掲載している画像を参照してください。
shadowフィルタの影の色にはgrayを指定し，影の方向を定義するdirectionには45を指定して，右上方向に影が表示されるようにしています。変数noの値が90になったときには，alphaとshadowフィルタの値を固定させています。
変数noの値が，90に達していない場合は，noの値を1ずつ増加させ，透明度を指定するalphaフィルタのopacityに，noの値を指定します。これにより，文字列が浮かびあがるように表示されます。
if (no>=90){
clearInterval(timer1)
no=90;
document.getElementById("moji").style.filter
="alpha(opacity=90,style=3) shadow(color=gray,direction=45)";
return(0);
}
else{
document.getElementById("moji").filters.alpha.opacity=no;
no++;
}
