PARAPARA Animation

Description:

JavaScriptでアニメーション処理を行います。
GIFでアニメーション処理してもあまり意味がないので、 PNGを使ってアニメーション処理してあります。

Demo:

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<script language="JavaScript" type="text/javascript">
<!--
function paraAnimSetting(){
 if(document.images) {
   this.imgcount = 0;
   this.paracount= 0;
   this.paraimg= new Array();
   this.defsec  = 500;  //次の画像へ切り替わるまでの時間。
   this.loop = true;    //アニメーションがループするかどうか。true/false。trueの場合ループする。
   /* 画像の設定 */
   this.paraimg[this.imgcount] = new Image(); this.paraimg[this.imgcount++].src = "../_image/card/0.png";
   this.paraimg[this.imgcount] = new Image(); this.paraimg[this.imgcount++].src = "../_image/card/1.png";
   this.paraimg[this.imgcount] = new Image(); this.paraimg[this.imgcount++].src = "../_image/card/2.png";
   this.paraimg[this.imgcount] = new Image(); this.paraimg[this.imgcount++].src = "../_image/card/3.png";
   this.paraimg[this.imgcount] = new Image(); this.paraimg[this.imgcount++].src = "../_image/card/4.png";
   this.paraimg[this.imgcount] = new Image(); this.paraimg[this.imgcount++].src = "../_image/card/5.png";

 //更に画像を増やしたい場合は、
 // this.paraimg[this.imgcount] = new Image();
 // this.paraimg[this.imgcount++].src = "画像パス";
 //を増やしたい分だけ書き続ける。
 }
}

function paraAnim(imgname, el) {
 if(document.images) { 
  var obj = eval(el);
  document.images[imgname].src = obj.paraimg[obj.paracount].src;
  obj.paracount++;
  if(obj.paracount >= obj.paraimg.length) {
    if(obj.loop) { obj.paracount = 0; } else { return; }
  }
  setTimeout("paraAnim('"+imgname+"','" +el+ "')", obj.defsec);
 }
}

var panim = new paraAnimSetting();
//-->
</script>

</head>

<body onLoad="paraAnim('imgparaanim', 'panim');">


<img src="../_image/card/0.png" width=72 height=96 name="imgparaanim" border=0>



</body>
</html>

Advice:

Arrangement:

Browser:

Internet Explorer4.0以上
Netscape Navigator3.0以上
[ Back ]