画像が降る上る８　吹雪　-ぱーぷりんの溜まり場-

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>画像が降る上る８　吹雪　-ぱーぷりんの溜まり場-</title>

<style type="text/css">
<!--
/*★画面の揺れを防ぐため*/
body{width:100%; height:100%;}
-->
</style>

</head>
<body bgcolor="#000000">

<p style="background-color:#ffffff; color:#000000; font-size:90%; text-align:left; padding:20px; width:40%;">
◆「入力事項」の部分で、色に合わせて、次の設定をします。(★原本説明書)<br>
  ・ 移動の方向が「右下」なので、<font color="red"> 3 </font>を指定します。<br>
  ・ 画面全体に表示するので、全てに<font color="red"> 0 </font>を指定します。　なぜなら、「画面全体に表示」
       とは「上・左端丁度から、右・下端一杯まで表示」に当たりますね。<br>
  ・ 吹雪のなので、速さを大きく<font color="red"> 200 </font>に調整します。<br>
  ・ まっすぐに降らせたいので<font color="red"> 0 </font>に調整します。<br>
  ・ 雪の画像を、<font color="red">アドレスを含むファイル名</font>で指定します。<br>
  ・ <font color="red">同時に表示する雪の画像の数</font>を指定します。<br>
  ・ ずっと指定数の画像を表示するから<font color="red"> -1 </font>を指定<br>
  ・ 粗くせずスピードを上げたいので<font color="red"> 30 </font>に調整します。<br>
</p>

<!--●注意！　HTML5の時は<body>の中に中身が無いと雪が降りません。普通は文章や画像やboxがあるので、問題ないと思いますが、この見本では中身が無いので、<div></div>で空間を開けています-->
<div style="width:800px; height:500px;"></div>



<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript">
<!--
/*****************************************************************************
// naname ver2.00  （ぱーぷりんの溜まり場）
Javascript by http://kyoei.arrow.jp/jissai.html 京栄一級建築士事務所
****************************************************************************/
ugoku=new Array();   // この行は触らないで・・

/********************************  入力事項  ******************************/
// ======= 入力１：画像の種類と流れる方向,流れ方,および範囲
// １番目の数字により 0:右上  1:左上  2:左下  3:右下 方向へ流れる
// ２～３番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// ４～５番目の数字で「表示幅」と「表示高さ」( px )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する。
// ６番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 30）
// ７番目の数字で、揺れの方向の最大幅をピクセル値で入力（目安値 30）
// ８番目の数字で、揺れの方向の最大速さを入力（大きい程,早く荒い 目安値 10）
// ９番目以降で、出したい画像の種類を必要数だけ入力（0から順に）
//     画像が２つ以上あるときは、流れ出す度に、画像が変わる。
ugoku[0]=new Array(3, 0,0, 0,0, 200, 0, 10, "wb10.png");
ugoku[1]=new Array(3, 0,0, 0,0, 200, 0, 10, "wb20.png");
// ======= 入力２：補助入力事項
var no  = 14 ;  // 画面に同時に出す画像数を入力
var hsw = -1 ;   // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）
                 //   １個表示されるのは、ugoku[0]で指定した画像です。
var srl =  1 ;  // 画像を同時にスクロールさせるか？  （ yes=1 , no=-1 ）
  // 以上の調整で、速さが足りない（荒い）場合は、次の数値を大きくする
var chg = 30 ;  // 一秒当たりの描画の切替え回数（初期値 10）
// *************************** 入力事項ここまで **************************

//  共通変数・配列の設定
var off_w, off_h, doc_x, doc_y, dx, dy;
dgr=new Array(); xza=new Array(); yza=new Array(); amp=new Array();
stx=new Array(); sty=new Array(); kaku=new Array();
sdg=new Array(); muki=new Array(); img_w=new Array(); img_h=new Array();
marg_t=new Array(); marg_l=new Array(); disp_w=new Array(); disp_h=new Array();
Gy=new Array(); Gx=new Array(); Gp=new Array();

//  初期値の設定 
ingN=0; dpsw=1; prima=-1;
for(i=0; i<no; i++){
 Gy[i]=ingN; Gx[i]=ugoku[ingN].length; Gp[i]=8;
 document.write("<div id='dot"+i+"' style='position:absolute; z-index:52'>"
   +"<img src='"+ugoku[ingN][8]+"' id='img"+i+"'></div>")
 dgr[i]=Math.random()*6.24; muki[i] =ugoku[ingN][0]; 
 marg_t[i]=ugoku[ingN][1]; marg_l[i]=ugoku[ingN][2];
 disp_w[i]=ugoku[ingN][3]; disp_h[i]=ugoku[ingN][4];
 prim(i);
 xza[i]=marg_l[i]+Math.random()*(disp_w[i]-img_w[i]);
 yza[i]=marg_t[i]+Math.random()*(disp_h[i]-img_h[i]);
  if (ingN==(ugoku.length-1)){ ingN=0 } else{ ingN+=1 } }
Zahyo();

// メインルーチン
function Zahyo(){ brSize();
for(i=0; i<no; ++i){
 dgr[i]+=sdg[i];
 ddx=Math.sin(kaku[i]); ddy=Math.cos(kaku[i]);
  if(muki[i]==1 || muki[i]==3){ ddx=-ddx }
 dx=amp[i]*Math.sin(dgr[i])*ddx; dy=amp[i]*Math.sin(dgr[i])*ddy;
 xza[i]+=stx[i] ; yza[i]+=sty[i];
if( xza[i]+dx>marg_l[i]+disp_w[i]-img_w[i] || xza[i]+dx<marg_l[i] ||
    yza[i]+dy>marg_t[i]+disp_h[i]-img_h[i] || yza[i]+dy<marg_t[i] ) {
 prim(i);
  if(muki[i]==0){ if( Math.random()<0.5){st_3(i)} else{st_4(i)} }
  if(muki[i]==1){ if( Math.random()<0.5){st_2(i)} else{st_3(i)} }
  if(muki[i]==2){ if( Math.random()<0.5){st_1(i)} else{st_2(i)} }
  if(muki[i]==3){ if( Math.random()<0.5){st_1(i)} else{st_4(i)} } }

 Disp("dot"+i, off_w+xza[i]+dx, off_h+yza[i]+dy) }
 setTimeout("Zahyo()",1000/chg) }

// スタート位置
function st_1(u){
  xza[u]=marg_l[u]+Math.random()*(disp_w[u]-img_w[u]);
  yza[u]=marg_t[u]; if(dy<0){ yza[u]+=dy } }  // 上辺
function st_2(u){
  xza[u]=marg_l[u]+disp_w[u]-img_w[u]; if(dx>0){ xza[u]-=dx }
  yza[u]=marg_t[u]+Math.random()*(disp_h[u]-img_h[u]); }  // 右辺
function st_3(u){
  xza[i]=marg_l[u]+Math.random()*(disp_w[u]-img_w[u]);
  yza[i]=marg_t[u]+disp_h[u]-img_h[u]; if(dy>0){ yza[u]-=dy } }  // 下辺
function st_4(u){
  xza[i]=marg_l[u]; if(dx<0){ xza[u]+=dx }
  yza[i]=marg_t[u]+Math.random()*(disp_h[u]-img_h[u]) }  // 左辺

// 初期データ発生
function prim(i){ brSize();
if (hsw>0){
 if(prima>0 && i==0){
  if(dpsw>0){ visi="hidden"; dpsw=-1 } else{ visi="visible"; dpsw=1 }
  for(k=1; k<no; k++){ document.getElementById("dot"+k).style.visibility=visi }
 } }; prima=1;

 document.getElementById("img"+i).src=ugoku[Gy[i]][Gp[i]]; Gp[i]++;
  if(Gp[i]>=Gx[i]){ Gp[i]=8 }
 img_h[i]=document.getElementById("img"+i).height;
 img_w[i]=document.getElementById("img"+i).width;
 if(disp_w[i]==0){disp_w[i]=doc_x-marg_l[i]};
 if(disp_h[i]==0){disp_h[i]=doc_y-marg_t[i]};
 kaku[i]=0.44+Math.random()*0.69;
 amp[i] =(0.2+Math.random()*0.8)*ugoku[Gy[i]][6];
 sdg[i] =(0.3+Math.random())*ugoku[Gy[i]][7]/100;
 stz=(0.7+Math.random())*ugoku[Gy[i]][5]/10;
  if(muki[i]==0 || muki[i]==3){stx[i]=Math.cos(kaku[i])*stz}
    else{stx[i]=-Math.cos(kaku[i])*stz}
  if(muki[i]==2 || muki[i]==3){sty[i]=Math.sin(kaku[i])*stz}
    else{sty[i]=-Math.sin(kaku[i])*stz} }

// ブラウザのサイズを調べる★新2014/06/12修正★
function brSize(){
 if(document.getElementById){
 doc_x=document.body.clientWidth; doc_y=document.body.clientHeight;
 off_w=document.body.scrollLeft; off_h=document.body.scrollTop }
 if(srl < 0){ off_w=0; off_h=0 } }

// 画像を移動する
function Disp(num,xx,yy){
/*★HTML5で動作させるために、以下２行に +"px" を追加*/
  document.getElementById(num).style.left=xx+"px";
  document.getElementById(num).style.top =yy+"px" }

// -->
</script>
<!--★ここまでコピー-->

</body>
</html>
ぱーぷりん８■画像C■ 吹雪 -ぱーぷりんの溜まり場- 最新修正日時 : 2014/06/14

　ぱーぷりん８■画像C■　吹雪　-ぱーぷりんの溜まり場-　　　　　最新修正日時 : 2014/06/14
