文字列clipの応用 3

左右パターン上下パターン
(2つのパターンを同時に動かすこともできます)

CSS STYLE

全く同一の３個の文字列を重ねる。二枚の文字列に、左右／上下のクリップ領域を設定し、移動させる。

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

<script language="JavaScript"><!--
//･･･上下パターンの動き･･･
var tp = 15;
var bm = 20;
var dy = 2;             //増減値
var timerTB;
function GoStopTB()     {　　　　　　
   if(bt1.innerText == "開始"){
          dv2.style.backgroundColor = "pink";
          dv2.style.color = "red";
          bt1.innerText = "停止";
          GoTB();
    }else{
          clearTimeout(timerTB);
          dv2.style.backgroundColor = "";
          dv2.style.color = "";
          bt1.innerText = "開始";
     }
}
function GoTB(){
     dv2.style.clip = "rect(" + tp + " 410 " + bm + " 0)";;
     tp += dy;
     bm += dy;
     if(tp < 15 ||bm > 80)dy = -dy;
     timerTB = setTimeout("GoTB()",100);
}

//････左右パターンの動き･･･
var lt = 0;
var rt = 20;
var dx = 5;             //増減値
var timerLR;
function GoStopLR()     {　　　　　　　
    if(bt2.innerText == "開始"){
          dv3.style.backgroundColor = "white";
          dv3.style.color = "lime";
          bt2.innerText = "停止";
          GoLR();
    }else{
          clearTimeout(timerLR);
          dv3.style.backgroundColor = "";
          dv3.style.color = "";
          bt2.innerText = "開始";
    }
}
function GoLR(){
     dv3.style.clip = "rect(15 " + rt + " 80 " + lt + ")";;
     lt += dx;
     rt += dx;
     if(lt < 0 || rt > 410)dx = -dx;
     timerLR = setTimeout("GoLR()",100);
}

//--></script>
</head>

<body>
<p>
　左右パターン<button id="bt2" onclick="GoStopLR();">開始</button>
　上下パターン<button id="bt1" onclick="GoStopTB();">開始</button><br>
</p>
<div id="dv1" style="position:absolute;top:180;left:250;width:420px;
　　background-color:silver;font:bold 65px 'Arial Black';
　　clip:rect(15 410 80 0)">CSS STYLE
</div>
<div id="dv2" style="position:absolute;top:180;left:250;width:420px;
　　font:bold 65px 'Arial Black'">CSS STYLE</div>
<div id="dv3" style="position:absolute;top:180;left:250;width:420px;
　　font:bold 65px 'Arial Black'">CSS STYLE</div>