遠ざかる（近づく）画像 の JavaScript
 戻　る

表現の特徴
 * 回転しながら画像が遠ざかり（近づき）ます。
 * 回転方向や、画像が遠ざかるか近づくかを設定できます。
 * 数値の設定だけで、画像の種類毎に、画像の指定や、動きの調整が出来ます。
 * スクロールに対応・非対応を選択出来ます。
 * Internet　Explorer 6 および Netscape 7 で動作確認しています。

設定方法
「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。

 ■ 画像の前後に移動する速さを説明に従い、数字で指定します。
      正数の場合は遠ざかり、負数の場合は近づくようになります。
 ■ 画像の回転する速さを説明に従い、数字で指定します。
      ＋、−の符号で、回転方向を決めます。回転させたくない場合は、「0」を入力します。
 ■ 表示したい画像を、アドレスを含むファイル名で指定します。
 ■ 回転の中心を指定します。　表示画面の左からと、上からのピクセル値で入力します。
 ■ 全体的な画像の大きさを数字で指定。数字が大きいほど、全体的に大きく表示される。
 ■ 画像が発生したり、消えたりする位置で、遠い側の距離と、手前側の距離を指定します。
 ■ 画像の発生位置を、回転中心に密集させる度合いを指定。数字が大きいほど密集する。
 ■ 画面に同時に出したい画像数を入力します。
 ■ 画面をスクロールさせた時、画像も同時に移動させるか？ （ yes = 1 , no = -1 ）
 ■ 動きの全体の速さを入力します。（大きいほど速いが、負担大）

// *******************************  入力事項  **********************************
// ======= 入力１：画像の種類および動きの調整（0から順に必要な種類数だけ入力）
// １番目で画像の速さの最大値を入力。 正数で遠ざかり、負数で近づく （目安値 10）
// ２番目で円の回転速さの最大値を入力 +:時計廻 -:反時計廻 0:無回転 （目安値 10）
// ３番目で出したい画像を、アドレスを含むファイル名で指定
ugoku[0]=new Array( 10, 20, "../parts/samp1.gif");
ugoku[1]=new Array( 15, 15, "../parts/samp2.gif");
ugoku[2]=new Array( 20, 10, "../parts/samp3.gif");
// ======= 入力２：全体表示の調整（ [ ]内は、近づく場合）
var Xo= 400 ;  // 回転中心の、画面左端からの距離（ピクセル）
var Yo= 250 ;  // 回転中心の、画面上端からの距離（ピクセル）
var lr=  10 ;  // 画像の大きさで、大きいほど全体的に大きくなる  （目安値 10）
var pd=  10 ;  // 画像が消える[発生する]遠さ。大きいほど遠い    （目安値 10）
var vp=  10 ;  // 画像の発生する[消える]近さ。小きいほど近い    （目安値 10）
var oar= 10 ;  // 画像の発生する範囲。 小きいほど中心に密集する （目安値 10）
// ======= 入力３：補助入力事項
var no=   6 ;  // 画面に同時に出す画像数を入力
var srl=  1 ;  // 画像も同時にスクロールさせるか？        （ yes=1 , no=-1 ）
  // 以上の調整で、速さが足りない（荒い）場合は、次の数値を大きくする
var chg= 10 ;  // 一秒間の描画の切替数。大きい程全体の動きが速い（目安値 10）
// ***************************** 入力事項ここまで ******************************

更新履歴
・ 05/01/19　ver 1.10　Internet Explorer 6 および Netscape 7 に対応。スクロール対応他。
・ 04/03/22　ver 1.00　遠ざかる・近づくを一括化。円を描ける。スクロールに対応。その他更新
・ 03/10/17　ver 0.10　設定項目の追加。画面右と下の消え方の不具合修正。その他微調整
・ 03/06/05　ver 0.00　初　公　開

使用画像
・ 画像は Engel Heart さんから借りました。

プログラム
・下記の部分をコピーアンドペーストして使って下さい。 （<body>〜</body>の間に置く）
・ここのプログラムをスタイルシート・テーブルで囲わないでください。
<script type="text/javascript">
<!--// star  ver1.10  （ぱーぷりんの溜まり場）
 ugoku=new Array();   // この行は触らないで・・

// *******************************  入力事項  **********************************
// ======= 入力１：画像の種類および動きの調整（0から順に必要な種類数だけ入力）
// １番目で画像の速さの最大値を入力。 正数で遠ざかり、負数で近づく （目安値 10）
// ２番目で円の回転速さの最大値を入力 +:時計廻 -:反時計廻 0:無回転 （目安値 10）
// ３番目で出したい画像を、アドレスを含むファイル名で指定
ugoku[0]=new Array( 10, 20, "../parts/samp1.gif");
ugoku[1]=new Array( 15, 15, "../parts/samp2.gif");
ugoku[2]=new Array( 20, 10, "../parts/samp3.gif");
// ======= 入力２：全体表示の調整（ [ ]内は、近づく場合）
var Xo= 400 ;  // 回転中心の、画面左端からの距離（ピクセル）
var Yo= 250 ;  // 回転中心の、画面上端からの距離（ピクセル）
var lr=  10 ;  // 画像の大きさで、大きいほど全体的に大きくなる  （目安値 10）
var pd=  10 ;  // 画像が消える[発生する]遠さ。大きいほど遠い    （目安値 10）
var vp=  10 ;  // 画像の発生する[消える]近さ。小きいほど近い    （目安値 10）
var oar= 10 ;  // 画像の発生する範囲。 小きいほど中心に密集する （目安値 10）
// ======= 入力３：補助入力事項
var no=   6 ;  // 画面に同時に出す画像数を入力
var srl=  1 ;  // 画像も同時にスクロールさせるか？        （ yes=1 , no=-1 ）
  // 以上の調整で、速さが足りない（荒い）場合は、次の数値を大きくする
var chg= 10 ;  // 一秒間の描画の切替数。大きい程全体の動きが速い（目安値 10）
// ***************************** 入力事項ここまで ******************************

// ----- 共通変数・配列の設定 -----
var docW, docH, offW, offH;
v =new Array(); z =new Array(); sp=new Array(); rd=new Array();
dx=new Array(); dy=new Array(); r =new Array(); sita=new Array();

// ----- 開始値の設定 -----
var j=0; vp=vp/100; lr=lr/5; brSize();
for(i=0; i<no; i++){
 document.write(
  "<span id='lay"+i+"' style='position:absolute; z-index:50;'>"+
  "<img src='"+ugoku[j][2]+"' id='img"+i+"'></span>");
 dx[i]=document.getElementById("img"+i).width;
 dy[i]=document.getElementById("img"+i).height;
 sp[i]=ugoku[j][0]; rd[i]=ugoku[j][1];
 prim(i);
  if(j==(ugoku.length-1)){j=0} else{j+=1} }
star();

// ----- メインの設定 -----
function star(){
for(i=0; i<no; i++){
   if( z[i]>pd || z[i]<vp ){ brSize(); prim(i) }
 z[i]+=v[i]; sita[i]+=rd[i]/50;
 sx=r[i]*Math.cos(sita[i])/z[i]+Xo;
 sy=r[i]*Math.sin(sita[i])/z[i]+Yo;
 sdx=dx[i]/z[i];  sdy=dy[i]/z[i];

  while(sx<0 || sy<0 || (sx+sdx*lr)>docW || (sy+sdy*lr)>docH){
     if ( z[i]<vp ){ brSize(); prim(i) }
   z[i]+=v[i]; sita[i]+=rd[i]/50;
   sx=r[i]*Math.cos(sita[i])/z[i]+Xo;
   sy=r[i]*Math.sin(sita[i])/z[i]+Yo;
   sdx=dx[i]/z[i];  sdy=dy[i]/z[i] }
   Disp(i,sx,sy) }
 setTimeout("star()",1000/chg);}

// ----- 画像を発生する -----
function prim(i){
 if (sp[i]>0) { z[i]=vp } else{ z[i]=pd };
 v[i]=[0.6*Math.random()+0.4]*sp[i]/15;
 ro=Math.sqrt(Math.pow(docW,2)+Math.pow(docH,2))/2
 if (sp[i]>0) { r[i]=ro*Math.random()*oar/4 }
       else{ r[i]=ro*Math.random()*oar*5/pd };
 sita[i]=2*Math.PI*Math.random() }

// ----- ブラウザのサイズ -----
function brSize(){
 if(document.all){
  docW=document.body.clientWidth; docH=document.body.clientHeight;
  offW=document.body.scrollLeft;  offH=document.body.scrollTop }
 else if(document.getElementById){
  docW=window.innerWidth; docH=window.innerHeight;
  offW=window.scrollX;    offH=window.scrollY }
  if(srl < 0){ offW=0; offH=0 } }

// ----- 画像を移動させる -----
function Disp(i,sx,sy){
 document.getElementById("img"+i).width =lr/z[i]*dx[i];
 document.getElementById("img"+i).height=lr/z[i]*dy[i];
 document.getElementById("lay"+i).style.left=sx+offW;
 document.getElementById("lay"+i).style.top =sy+offH }

// End -->
</script>