Javascript Patchworker - フィルタ関連

フィルタ関連

フィルタ関連

JavaScript

掲示板

フィルタについて

　Windows版のIEで表現できるフィルタに動的な効果を付加したスクリプトを中心に扱っています。フィルタの詳細はCSSのフィルタ関連で扱っています。フィルタはそれ単体でかなりのインパクトが与えられますので、そのイメージを壊さないようにスクリプトを作成しました。そのためスクリプト自体の仕組みは非常に簡単なものが多いです。

フィルタ利用上の注意

　CSSのページにも掲載しましたが、重要なことなのでこちらにも掲載します。
　フィルタが動作するのはWindows版のInternet Explorer5.5以上です。Netscape Navigator他IE以外のブラウザでは動作保障は出来ません。
　ただし、
filter:progid:DXImageTransform.Microsoft.フィルタ名
と記述する代わりに
filter:フィルタ名
と記述することで、IE4.0以上の環境で動作できるフィルタも多数存在します。
また、Windows2000ではフィルタがまったく動作しない場合があります。

設置のアドバイス

　先にも述べましたが、スクリプトの仕組みは簡単なものが多いですので、初心者でも割とすんなりと設置・改良できます。ドキュメント関連と比べかなり手軽にインパクトを与えられますが、これを見れるのはほんの一部のブラウザだけだ、ということを覚えておいてください。

サンプルプログラム

　alphaフィルタを波打つように表現しました。
　サンプルでは幻想的な雰囲気が出せます。詳細はこちら

サンプルプログラム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  var moveTime = 10; //動く早さを設定　大きいほど遅い
  var waitTime = 5;
  //待ち時間　波が端に寄ったときに
  //moveTime*waitTimeだけ待つことになる
//------------------------------------------------------

waitTime = Math.abs(waitTime * 10); //待ち時間を10倍した絶対値
waitTime *= -1; //待ち時間を-1倍して必ず負数になるようにする

var alphaOpa;
var finishOpa;
var flag = new Boolean(true);
function set(){
  if (document.all) {
    alphaOpa = document.getElementById("alpha").filters[0].opacity;
    finishOpa = document.getElementById("alpha").filters[0].finishopacity;
    setInterval("alphaWave()", moveTime);
  }
}
function alphaWave(){
  if (flag == true) {
    alphaOpa -= 1; finishOpa += 1;
  }
  else {
    alphaOpa += 1; finishOpa -= 1;
  }
  document.getElementById("alpha").filters[0].opacity = alphaOpa;
  document.getElementById("alpha").filters[0].finishopacity = finishOpa;
  if (alphaOpa <= waitTime) flag = false;
  if (finishOpa <= waitTime) flag = true;
}
window.onload = set;
//-->
</script>
<style type="text/css">

</style>
</head>
<body>
<p id="alpha"> JavaScript PatchWorker</p>

</body>
</html>