clipを利用したバナー

　HOME 　>>> 　HTML整理ノート　>>> DHTML -- 基本編　　　応用編

DynamicHTML

Kodayanの

全く同形の3枚のDIV要素を重ね、上2枚のclip領域を変化さす。
要素の背景色、文字色はランダムに変える。

Sample Source......................................................................>>>

<style TYPE="text/css"><!--
   .sty1 {position:absolute;top:80;left:60;width:350;
	  text-align:center;font:30pt "Arial Black";
	  clip:rect(5 350 80 0);}
--></style>
<script language="JavaScript"><!--
function RandomColor(){	//ﾗﾝﾀﾞﾑ色を生成する関数
  var c = new String();	//文字列ｵﾌﾞｼﾞｪｸﾄ"c"を定義
  for(i=0;i<3;i++){
    c1 = Math.floor(Math.random()*255);  //0～254の乱数を生成
	c2 = c1.toString(16);	//16進数に変換
	if(c2.length<2)c2 = "0" + c2;  //1桁の場合は0を付ける
	c = c + c2;	//色指定の RRGGBB 形式を生成
  }
  return c;
}

var dy = 5;		//clipﾌﾟﾛﾊﾟﾃｨの増減値
var clipR = 350;
var clipL = 0;
st = new Array("Kodayanの","DynamicHTML","Wonderful!!","Nice Nice !!");
var n = 1;
function Go(){
  dv2.style.clip = "rect(5 " + clipR + " 80 0)";
  dv3.style.clip = "rect(5 350 80 " + clipL + ")";

  clipR -= dy;
  clipL += dy;
  if(clipR < 0){
    dy = -dy;
    c = RandomColor();
    dv2.style.backgroundColor = "#" + c;
    c = RandomColor();
    dv2.style.color = "#" + c;
    c = RandomColor();
    dv2.innerText = st[n];
    dv3.style.backgroundColor = "#" + c;
    c = RandomColor();
    dv3.style.color = "#" + c;
    dv3.innerText = st[n];
	  
    n++;
    if(n == 4)n = 0;
  }
	
  if(clipR > 350){
    dy = -dy;
    c = RandomColor();
    dv1.style.backgroundColor = "#" + c;
    dv1.innerText = st[n];
  }

  setTimeout("Go()",100);
}

window.onload = Go;
//--></script>
</head>

<body>
<div id="dv1" class="sty1" 
  style="background-color:lime;color:skyblue;">
  DynamicHTML</div>
<div id="dv2" class="sty1" 
  style="background-color:pink;color:blue;">
  DynamicHTML</div>
<div id="dv3" class="sty1"
  style="background-color:skyblue;color:red;filter:alpha(opacity=70);">
  DynamicHTML</div>

end(最終更新:12/11/12)