Filter:Alpha

Filter:Alpha

左から徐々に文字が表示されていきます。
画像に適用すると、色化けするような、、、

 
Dynamic HTML

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

if(isIE4) {
  alpha  = new Object();
  alpha.step = 1; //変化度数
 }

function alpha_anima(id) {
 el = document.all(id);
 fil= el.filters['alpha'];
  if(fil.opacity <= 100) {
    fil.finishX += alpha.step; fil.finishX += alpha.step;
  }
 }

//-->
</SCRIPT>


</HEAD>


<BODY>


<div id="ALPHA1" style="align:center;width:100%;height:90px;font-size:38pt;color:#228b22;font-family:Times New Roman,COURIER NEW;
 filter:alpha(opacity=100, finishOpacity=0, style=1, startX=0, startY=0, finishX=0, finishY=0)"
 onFilterChange="setTimeout('alpha_anima(\''+this.id+'\')',100)"> )"><!--この数字が変化の早さ。小さいほど高速-->

Dynamic HTML

</div>


</BODY>
</HTML>

Filter:Alpha -Fadein-

徐々に文字が現れてきます。

DHtml Station

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

if(isIE4) {
  alpha_fadein  = new Object();
  alpha_fadein.step = 1;//変化度数
 }

function alpha_fadein_anima(id) {
 el = document.all(id);
 fil= el.filters['alpha'];
  if(fil.opacity <= 100) {
    fil.opacity += alpha_fadein.step; fil.finishOpacity += alpha_fadein.step;
  }
 }

//-->
</SCRIPT>


</HEAD>


<BODY>


<div id="ALPHA_IN1" style="align:center;width:100%;height:90px;font-size:38pt;
filter:alpha(opacity=0, finishOpacity=0, style=1, startX=0, startY=0, finishX=100, finishY=100)"
onFilterChange="setTimeout('alpha_fadein_anima(\''+this.id+'\')',50)"><!--この数字が変化の早さ。小さいほど高速-->

DHtml Station

</div>


</BODY>
</HTML>

Filter:Alpha -Fadeout-

徐々に文字が消えていくというものなんです。
なぜかこのコントロール異常に重いような気が、、、、

DHtml Station

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

if(isIE4) {
 alpha_fadeout  = new Object();
 alpha_fadeout.step = 5;//変化の割合
 }

function alpha_fadeout_anima(id) {
 el = document.all(id);
 fil= el.filters['alpha'];
  if(fil.opacity > 0) {
    fil.opacity -= alpha_fadeout.step; fil.finishOpacity -= alpha_fadeout.step;
  }
 }

//-->
</SCRIPT>


</HEAD>


<BODY>


<span id="ALPHA_OUT1" style="align:center;width:100%;height:90px;font-size:38pt;font-family:Times New Roman,COURIER NEW;
 filter:alpha(opacity=100, finishOpacity=100, style=1, startX=0, startY=0, finishX=100, finishY=100)"
 onFilterChange="setTimeout('alpha_fadeout_anima(\''+this.id+'\')',100)">)"><!--この数字が変化の早さ。小さいほど高速-->

DHtml Station

</span>



</BODY>
</HTML>

Filter:DropShadow -Conflation-

下の文字が徐々に近づいていき、融合していきます。
このフィルターは、自分のコピーを製造するものです。

Welcome to Internet Start Pages!!

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;


var drop_confla  = new Object();
drop_confla.step = 1;  //変化割合
drop_confla.min  = 2;  
drop_confla.time = 50; //アニメスピード。数字が小さいほど高速。

function drop_confla_anima(id) {
 el = document.all(id);
 fil= el.filters['dropShadow'];
  if(!(fil.offX <=drop_confla.min)) {
    fil.offX -= drop_confla.step; fil.offY -= drop_confla.step;
    setTimeout("drop_confla_anima('"+id+"')",drop_confla.time);
  }
 }

//-->
</SCRIPT>

<SCRIPT Language="JScript" for="window" event="onLoad()">
<!--
  if(isIE4) {
    drop_confla_anima("DROP_CONFL1")
  }
//-->
</SCRIPT>


</HEAD>


<BODY>


<div id="DROP_CONFL1"
style="
 align:center;
 width:100%;
 height:90px;
 font-size:38pt;
 color:#87ceeb;
 font-family:Comic Sans MS,Times New Roman,COURIER NEW;
 filter:dropShadow(color=#87ceaf,offX=40, offY=40, positive=1)">
 
Welcome to Internet Start Pages!!

</div>


</BODY>
</HTML>

Filter:FlipH

文字を鏡像文字にします。JavaScriptで操作してもあまり意味ないんですけどね(^^;
とりあえず、

なんて書いてあるでしょうか？

SOURCE

Filter:Gray

GARYは、画像データ等をモノクロ化します。
このサンプルでは、画像を初めからモノクロ化しておいて、リンクにマウスが触れると、カラー表示(元の色)にします。

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


</HEAD>


<BODY>


<a href="http://www.microsoft.com/japan/">
<img src="http://www2f.meshnet.or.jp/~takan/javac/_image/logo/ns3.gif" id="GRAY1" border=0
 style="align:center;width:88px;height:31px;filter:Gray" onMouseover="this.style.filter=''" onMouseout="this.style.filter='gray'">
</a>

<a href="http://www.netscape.com/">
<img src="http://www2f.meshnet.or.jp/~takan/javac/_image/logo/ie3.gif" id="GRAY2" border=0
 style="align:center;width:88px;height:31px;filter:Gray" onMouseover="this.style.filter=''" onMouseout="this.style.filter='gray'">
</a>

<a href="http://www.yamaha.co.jp/xg/">
<img src="http://www2f.meshnet.or.jp/~takan/javac/_image/logo/yamaha_mid.gif" id="GRAY3" border=0
 style="align:center;width:88px;height:31px;filter:Gray" onMouseover="this.style.filter=''" onMouseout="this.style.filter='gray'">
</a>

<a href="http://www02.so-net.or.jp/~kg-group/">
<img src="logo.gif" id="GRAY4" border=0
 style="align:center;width:88px;height:31px;filter:Gray" onMouseover="this.style.filter=''" onMouseout="this.style.filter='gray'">
</a>



</BODY>
</HTML>

Filter:GLOW

文字が呼吸しているような感じに、、、作ってみました。
ちなみに、このコントロールはオブジェクトににじみ効果を与えるモノです。

WELCOME TO Internet Start Pages!!

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

var glow = new Object();
glow.max = 10;  //にじみ最大値
glow.min = 3;   //にじみ最小値
glow.ct  = 1;   //１度の処理で変更される値。現在１度の処理につき、１段階変更される。
glow.time= 100; //変更スピード。数字が小さいほど高速。

function glow_anima(id) {
 el  = document.all(id);
 fl  = el.getAttribute("JAVAC_GLOW");
 fil = el.filters['glow'];
  if(fl == true) {
    fil.strength += glow.ct;
     if(fil.strength >= glow.max) el.setAttribute("JAVAC_GLOW",false);
   }
   else { 
    fil.strength -= glow.ct;
     if(fil.strength <= glow.min) el.setAttribute("JAVAC_GLOW",true);
   }
  setTimeout("glow_anima('"+id+"')",glow.time);
 }
//-->
</SCRIPT>

<SCRIPT Language="JScript" for="window" event="onLoad()">
<!--
if(isIE4) {
  glow_anima("GLOW1"); //IDを記述
}
//-->
</SCRIPT>


</HEAD>


<BODY>


<div id="GLOW1" 
style="
align:center;
width:100%;
height:90px;
font-size:38pt;
color:#87ceeb;
font-family:Times New Roman,COURIER NEW;
filter:glow(color=#ff00ff, strength=10)" JAVAC_GLOW="false">

WELCOME TO Internet Start Pages!!

</div>


</BODY>
</HTML>

Filter:revealTrans

画像などのデータを、フィルターrevealTransで介して、表示します。
ボワーンとした感じから、少しずつ表示されたり、真ん中から外に向けて、画像の表示が行われたりします。
このサンプルでは、特別に色んな表示パターンを試すことが出来ます。
お好みの表示パターンがあったら、Transition=11に、ボタンの数字を入れて下さい。
ちなみに、個人的なお勧めは、12と2と21,22辺りです。

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

function rtrans_anima(id) {
 el = document.all(id);
 el.filters["revealTrans"].Apply();
 el.style.visibility = "visible";
 el.filters["revealTrans"].Play();
 }

if(isIE4) {
 window.onload = init;
 }


function init() {
   rtrans_anima("RTRANS1");

   //太字の所に、アニメーションするタグのidを記述して下さい。
   //いくつでも、rtrans_anima("id");というのを記述できます。
 }
//-->
</SCRIPT>


</HEAD>


<BODY>


<img id="RTRANS1" src="index_title.gif" 
style="
 visibility:hidden;
 align:center;width:450px;
 height:100px;
 font-size:38pt;
 color:#87ceeb;
 font-family:Times New Roman,COURIER NEW;
 filter:revealTrans(Duration=1.8, Transition=11)">


</BODY>
</HTML>

Filter:WAVE -REBIRTH-

砕けた文字が徐々に再生していきます。

WELCOME TO Internet Start Pages!!

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

if(isIE4) {
  wave_rebirth = new Object();
  wave_rebirth.step = 5;  //変化の割合
 }

function wave_rebirth_anima(id) {
 el = document.all(id);
 fil= el.filters['wave'];
  if(!(fil.strength <= 0)) {
    fil.strength -= wave_rebirth.step;
   }
 }
//-->
</SCRIPT>



</HEAD>


<BODY>


<div id="WAVE_REB1"
style="
 align:center;
 width:100%;
 height:90px;
 font-size:38pt;
 color:#87ceeb;font-family:Times New Roman,COURIER NEW;
 filter: wave(add=0,phase=5,freq=3,strength=300)"
 onFilterChange="setTimeout('wave_rebirth_anima(\''+this.id+'\')',10)"><!--この数字が変化の早さ。小さいほど高速-->

Welcome to Internet Start Pages!!

</div>



</BODY>
</HTML>

Filter:WAVE -Disintegration-

前のとは逆に今度は、文字がどんどん崩れていきます。最後には完全に消えてしまいます(笑)
でも、カット＆ペーストで消えた文字の上をドラッグすると、消えてなかったり、、

Welcome to Internet Start Pages!!

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

if(isIE4) {
  wave_dis  = new Object();
  wave_dis.step = 5;   //変化の大きさ
  wave_dis.max  = 800; //崩れ最大値
 }

function wave_dis_anima(id) {
 el = document.all(id);
 fil= el.filters['wave'];
   if(!(fil.strength >= wave_dis.max)) {
    fil.strength += wave_dis.step;
   } 
 }
//-->
</SCRIPT>


</HEAD>


<BODY>


<div id="WAVE_DIS1"
style="
 align:center;
 width:100%;
 height:90px;
 font-size:38pt;
 color:#87ceeb;
 font-family:Times New Roman,COURIER NEW;
 filter: wave(add=0,phase=5,freq=3,strength=0)
 onFilterChange="setTimeout('wave_dis_anima(\''+this.id+'\')',100)"><!--この数字が変化の早さ。小さいほど高速-->

Welcome to Internet Start Pages!!

</div>


</BODY>
</HTML>

Filter:WAVE -Disintegration & Rebirth-

文字が崩れたり、再生したりを繰り返します。
本当はもうちょっと上手く作れるはずなんですけどね、、、時間がなくて(^^;

Welcome to Internet Start Pages!!

SOURCE

<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT Language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1) isIE4 = true;
else  isIE4 = false;

if(isIE4) {
  var wave_dr  = new Object();
  wave_dr.step = 2;  //変化の大きさ
  wave_dr.max  = 50; //崩れ最大値
  wave_dr.min  = 4;  //崩れ最小値
 }

function wave_dr_anima(id) {
 el = document.all(id);
 fil= el.filters['wave'];
 if(el.getAttribute("WAVE_DR1") == "true") {
   fil.strength += wave_dr.step;
    if(fil.strength > wave_dr.max)  el.setAttribute("WAVE_DR1","false");
  }
 else {
   fil.strength -= wave_dr.step;
    if(fil.strength < wave_dr.min)  el.setAttribute("WAVE_DR1","true");
  }
 }
//-->
</SCRIPT>


</HEAD>


<BODY>


<div id="WAVE_DR1"
style="
 align:center;
 width:100%;
 height:90px;
 font-size:38pt;
 color:#87ceeb;
 font-family:Times New Roman,COURIER NEW;
 filter: wave(add=0,phase=5,freq=3,strength=0)"
 JAVAC_WAV-DR="true"
 onFilterChange="setTimeout('wave_dr_anima(\''+this.id+'\')',50)"> <!--この数字が変化の早さ。小さいほど高速-->

Welcome to Internet Start Pages!!

</div>


</BODY>
</HTML>