合体１４　落ち葉の舞う窓

窓の向こうに舞い踊る落ち葉が見える JavaScript です。
背景作成の JavaScript で作った窓は位置指定が固定なので、スクロールすると背景画像が移動するように見える効果があります。
落ち葉は「降る上る」ではなく「ふわふわ」の JavaScript の方を使用して、風の強さを表現しました。

注意するのは、落ち葉の JavaScript の「var inZ=-11; 」です。この数値は「-11」を指定して下さい。
この指定は、落ち葉を文章の上に降らせるか、文章の下に隠すかで、普通は「1」か「-1」を選択します。
しかし今回は窓の下に隠します。
窓を作成した JavaScript は背景用なので、ソースに「z-index:-10;」の指定が入っています。
だから落ち葉を窓より下（奥）にするためには「var inZ=-11; 」の指定が必要なのです。
もちろん窓の内側に降らせるなら、文章の上か下かで「1」か「-1」を選択して下さい。

■合体元JavaScriptはこちら→　kurt.grigg１５■画像■複数の蝶が舞う＋背景作成１６ブロック並べの背景Ｉ枠線の窓

<!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{background:url(mh10.jpg)}/*★背景画像指定。敷詰。「黒背景の紅葉と竹」の背景画像は横1018px縦161pxの横長画像です*/
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*=====================================================================
落ち葉の舞う窓      ★2015/12/07
複数画像のランダム移動：By Multi Random Movement 2 Script by kurt.grigg@virgin.net(JS保管：http://www2.tky.3web.ne.jp/~ogura1/)
背景作成参考：マウスでブロック落とし：JS保管：http://www16.big.or.jp/~ogura1/java_scr/blockfall/blockfall.html(Toshi's House)
======================================================================*/
//★落ち葉の画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の)の前には,(カンマ)無し
var Pic=new Array("bu1.gif","bu2.gif","bu3.gif","bu4.gif","bu5.gif");
var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var nm=20;    //★画像表示数
var inZ=-11;  //■■基本は画像や文章の上に浮くなら 1 。下に隠れるなら -1 だが、「窓の指定がz-index:-10;」なので、窓より下の「-11」
var spd=20;   //★速度。原本10。数値が大きいほど遅い


//★窓の色指定。var bc=new Array("●","●","●");とすると複数色になります。見本は透明指定。「transparent」は透明色の指定
var bc=new Array("transparent");
//★色の並べ方「通常(ランダム)は 0」「横一列に同色を並べる(横ボーダー)は 1」「 縦一列に同色を並べる(縦ボーダー)は 2」
var lineC=0;
var wbk=350;//★窓の横幅。単位はpx
var hbk=200;//★窓の縦幅。単位はpx
//■↓bCSSで指定したborder(枠線)の太さの２倍の数値をwlnとhlnに記述。表示が変わりますが２倍ではなく同じでも可
var wln=20;//★縦線(窓枠線)の幅(窓と窓の横間隔)。0にすると横ボーダー。縦線も横線も両方0にして、色の並べ方だけでボーダーも可
var hln=20;//★横線(窓枠線)の幅(窓と窓の縦間隔)。0にすると縦ボーダー。縦線も横線も両方0にして、色の並べ方だけでボーダーも可
var opa=1;//★窓の中の透過度指定。1～0.1で指定。指定しない時は 1 。0は不可。窓からbodyの背景画像が透けて見える。見本は「透明色」なので 1 指定
var ft="";//★模様として使用する文字の指定。指定しない時は　var ft="";で
//★円形や影指定や文字装飾指定。指定しない時は　var bCSS=""; で。見本は10pxの太さの立体窓枠と内側に白いボカシの影
var bCSS="border:ridge 10px #860; box-shadow:inset 0 0 30px #fff;";


//指定項目終了。ここから窓用（背景作成）----------------------------------------
var wb=wln+wbk;//ブロックの横幅
var hb=hln+hbk;//ブロックの縦幅
var w=Math.floor(window.innerWidth/wb);
var h=Math.floor(window.innerHeight/hb);
for (var j=0; j<=h; j++){
for (var i=0; i<=w; i++){
if(lineC==1){randombc=bc[j%bc.length];}//■横ボーダー専用。ドットは横に同じ色が並ぶ
else if(lineC==2){randombc=bc[i%bc.length];}//■縦ボーダー専用。ドットは縦に同じ色が並ぶ
else{randombc=bc[Math.floor(Math.random()*bc.length)];}//■色指定。通常使用（ランダム）
var wTag="<div style='position:fixed; top:"+j*hb+"px; left:"+i*wb+"px; width:"+wbk+"px; height:"+hbk+"px;background:"+randombc+"; z-index:-10; opacity:"+opa+"; "+bCSS+"'>"+ft+"</div>";
document.write(wTag);
}}

//ここから落ち葉用（複数画像のランダム移動）-------------------------------------
var n=Pic.length;
var load=new Array(); for(var p=0; p<n; p++){load[p]=new Image(); load[p].src=myurl+Pic[p];}//画像先読み
var VB=0,HB=0,R=new Array(),PB=new Array(),RD=new Array(),Y=new Array(),X=new Array();
var D=new Array(),SP=new Array(),BY=new Array(),BX=new Array();
for (var i=0; i<nm; i++){
document.write("<img src="+myurl+Pic[i%n]+" id='"+i+"' style='position:fixed; z-index:"+inZ+";'>");//固定指定へ
Y[i]=10;
X[i]=10;
D[i]=Math.floor(Math.random()*70+10);
SP[i]=Math.floor(Math.random()*4+2);/*MaxSpeed=4  MinSpeed=2の数値。大きいほど速い*/
}
function Curve(){
var plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1,0,5,-5);
for (i=0; i<nm; i++){
R[i]=Math.floor(Math.random()*plusMinus.length);
RD[i]=plusMinus[R[i]];
}
setTimeout('Curve()',1500);
}
function MoveRandom(){
var H=window.innerHeight, W=window.innerWidth;
for (i=0; i<nm; i++){
BY[i]=-(document.getElementById(i).height);
BX[i]=-(document.getElementById(i).width);
PB[i]=D[i]+=RD[i];
var y=SP[i]*Math.sin(PB[i]*Math.PI/180);
var x=SP[i]*Math.cos(PB[i]*Math.PI/180);
if (D[i] < 0){ D[i]+=360;}
Y[i]+=y; X[i]+=x; VB=180-D[i]; HB=0-D[i];
//Corner rebounds! not necessary but looks nice.
if ((Y[i] < 1) && (X[i] < 1)) {Y[i]=1;X[i]=1;D[i]=45;}
if ((Y[i] < 1) && (X[i] > W+BX[i])) {Y[i]=1;X[i]=W+BX[i];D[i]=135;}
if ((Y[i] > H+BY[i]) && (X[i] < 1)) {Y[i]=H+BY[i];X[i]=1;D[i]=315;}
if ((Y[i] > H+BY[i]) && (X[i] > W+BX[i])) {Y[i]=H+BY[i];X[i]=W+BX[i];D[i]=225;}
//Edge rebounds!
if (Y[i] < 1) {Y[i]=1;D[i]=HB;}  
if (Y[i] > H+BY[i]) {Y[i]=H+BY[i];D[i]=HB;}  
if (X[i] < 1) {X[i]=1;D[i]=VB;} 
if (X[i] > W+BX[i]) {X[i]=W+BX[i];D[i]=VB;} 
document.getElementById(i).style.top=Y[i]+"px";
document.getElementById(i).style.left=X[i]+"px";
}
setTimeout('MoveRandom()',spd);
}
window.onload=function (){Curve();MoveRandom();}
// --></script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

合体１４■Fl+Mv■ 合体１４ 落ち葉の舞う窓 UP日時 : 2015/12/07

　合体１４■Fl+Mv■　合体１４　落ち葉の舞う窓　　　　　UP日時 : 2015/12/07