◆ アニメーション

アニメーションの原理を応用する
アニメーションはパラパラ漫画と同じ原理です。画像が瞬時に入れ替わることであたかも動いているような気がするのです。そんなことをJavaScriptでも可能になります。3枚の画像を、0.5秒ごとに入れ替えます。原画がヘタクソなので動いているようには見えませんが、皆様でお試しください。

Sample   ← サンプルはこちらから

JavaScriptサンプルソース
あらかじめ同じサイズの3枚の画像を用意してください。ヘッダ部にスクリプトを記述します。
<script type="text/javascript">
<--
image1=new Image(); 
image1.src="banner1.gif";
image2=new Image(); 
image2.src="banner2.gif";
image3=new Image(); 
image3.src="banner3.gif";
function change()
{
  clearTimeout(timerID);
  if(document.anime.src==image1.src)
     document.anime.src=image2.src;
  else if(document.anime.src==image2.src)
     document.anime.src=image3.src;
  else
   document.anime.src=image1.src;
  timerID=setTimeout("change()",500);
}
//-->
</script>
HTMLサンプルソース
<body onLoad="timerID=setTimeout('change()',500)">
<div class="body">
<img src="banner1.gif" name="anime" width="352 " height="95" alt="アニメ">
</body>


This Page is HTML4.01 Valid! 初版更新日 2002/8/17
Copyright(C) banban@scollabo.com