PR

自分で書いて,しくみを理解!

古いけれども今も使える『無料の』技術で,Webプログラミングの面白さを,再発見してみましょう! ぜひ,リストを追いながら,初心にかえって,入力してみてください。プログラミングの楽しさを実感できることでしょう。

 今回も,前回に引き続き,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++;
}