Javascript Patchworker - 部分的なフェードイン・アウト

このスクリプトについて
　alphaフィルタを使ったサンプルです。文字が浮き上がったり消えていったりすることで雰囲気を演出できます。
　このような同じ動作の繰り返しの演出ならばJavaScriptを用いなくてもアニメーションGIFで実現できますが、手軽といえばこちらのほうが手軽とも言えますね。

実行例

こちらをご覧ください。

関連

対応ブラウザ
WIN IE 5.5～ NN -～　MAC IE -～ NN -～

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  var moveTime = 1; //動く早さを設定　大きいほど遅い
  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>

ユーザ設定
　ユーザが設定する変数は、moveTimeとwaitTimeです。
このスクリプトではオブジェクト上を右から左まで、透明な部分が波のように移動していきますが、 moveTimeを調節することでこの波が伝わる速さを調節できます。
また、waitTimeの値を変更することで、右端や左端まで波が伝わった後、動作を開始するまでの待ち時間を調節できます。
　文字の大きさや色、背景色などはCSSが記述してある部分を書き換えることで変更できます。詳しい書き換え方はCSSのページを参照してください。

JavaScriptのTOPに戻る　　

TOPに戻る