DynamicHTML




[ test-10 ]
ページタイトルが一文字づつ画面の外から集まってきます。


ページへ入ったら、文字を画面の外から指定した場所へ移動させて集めます。


Sample





このページのサンプルはページに入った時、画面上部に表示されます。






Source


<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--

//--表示する文字(ついでに色と大きさなども指定してしまいましょう)
var dt10_0Msg=new Array()
    dt10_0Msg[0]="".fontcolor('#ff4555').fontsize('7').bold()
    dt10_0Msg[1]="".fontcolor('#ee3444').fontsize('5').bold()
    dt10_0Msg[2]="".fontcolor('#dd2333').fontsize('4').bold()
    dt10_0Msg[3]="".fontcolor('#cc1222').fontsize('3').bold()
    dt10_0Msg[4]="".fontcolor('#aa0111').fontsize('2').bold()

//--一度に移動する量をピクセルで指定してください
var stepX=15

//--移動するスピードを指定してください(小さい程早い/同じ数値を指定しても早いマシンで見ると早く動作します^^;;)
var mvSpeed=100

//--最終位置の左肩をページ左上からのピクセル数で指定してください
var dt10_X=innerWidth/2-50 //左端(LEFT)から//--innerWidthはwindowの内幅です
var dt10_Y=50 //上(TOP)から

//--各レイヤーのスタート/エンド位置
var strX=new Array()
var endX=new Array()
var mvkei=new Array()//移動量

//--レイヤーセット
var MsgLn=dt10_0Msg.length//表示する文字の数
var LayW=new Array() //各レイヤー幅
 for(i=0;i<MsgLn;i++){
   with(document){
      write('<LAYER NAME="dt10_0MsgLay'+i+'"')
      write('    VISIBILITY="hide"')
      write('>')
      write(dt10_0Msg[i].fontsize(5))
      write('</LAYER>')

      LayW[i]=layers["dt10_0MsgLay"+i].clip.width //レイヤーの幅
      if(i==0)endX[i]=dt10_X         //最初の文字のエンド位置
      if(i>0)endX[i]=endX[i-1]+LayW[i-1]  //エンド位置
      rightX=outerWidth-endX[i] //エンド位置から右端までのピクセル数
      mvkei[i]=rightX-rightX%stepX+stepX //移動するピクセル数
      strX[i]=endX[i]+mvkei[i] //スタート位置
   }
 }

mvID=new Array()
layMsg=new Array()
//--移動準備
function dt10Mov(){
 for(j=0;j<MsgLn;j++){
  layMsg[j]=document.layers["dt10_0MsgLay"+j]
  layMsg[j].moveTo(strX[j],dt10_Y)
  layMsg[j].visibility="show"
  }
  mv(0)
}

k=0
//--文字の移動
function mv(k){
  if(k<=MsgLn-1){
    layMsg[k].moveBy(-stepX,0)
    if(layMsg[k].left<endX[k]){//endX[k]を過ぎたら止める
      clearTimeout(mvID[k])
      if(k<MsgLn){//とめても次の文字があれば再起動
        k++
        mvID[k]=setTimeout("mv("+k+")",mvSpeed)
      }
    }
    mvID[k]=setTimeout("mv("+k+")",mvSpeed)
  }
}
<!---->
</SCRIPT>
</HEAD>
<BODY 
  BGCOLOR="#ffffff" 
  TEXT="#000000"
  onLoad="dt10Mov()">
</BODY>
</HTML>





//--sourceの中のこの色は注目ポイントです。
//--この色の部分を自由に書き換えて使ってみましょう(^^)/