画像が降る上る１１■サイズ実寸で流れる -雛形倶楽部-

<!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(gat121d.jpg) fixed no-repeat #cca;;/*★背景画像指定。固定位置。繰り返し無し。背景色灰茶色*/
background-size:100% auto;;/*★背景画像の横幅は100%指定。縦幅自動。画像実寸は横800px縦165px*/
overflow-x:hidden;/*★横スクロールバーを出さない。横スクロールバーが出ないと困るならこの1行は削除*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================================
サイズ実寸で流れる(River)　BY　http://ayanaotakashun.com/sample/river/river_d.htm（雛形倶楽部）
★IE以外の他ブラウザでも動作可に改造。サイズ指定削除。HTML5対応、複数画像、位置、重ね方、透過指定、傾き角度を追加　2016/05/11
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★恐竜の画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["ugo1.gif","ugo2.gif","ugo3.gif","ugo4.gif","ugo5.gif","ugo6.gif"];
var myurl="";        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var nn=10;           //★原本30。恐竜の画像の表示数
var inZ=-1;          //★画像や文章の上に流れるなら 1 。下に隠れるなら -1
var Pos="fixed";     //★スクロールで移動するか？　固定:fixed 　移動:absolute
var maxOp=1;         //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.9;      //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var rota=[10,0,-10,0];  //★画像の傾き角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で
var spd=50;          //★原本50。全体の速度。数値が小さいほど速い

var ww=0;  //★表示横幅。単位pxで数値のみ指定。もし画面横幅一杯なら0と記述。
var hh=0;  //★表示縦幅。単位pxで数値のみ指定。もし画面縦幅一杯なら0と記述。
//★流れる角度。原本30。■0は→　■30は左上から右下　■90は↓　■150右上から左下　■180は←　■210は右下から左上　■270は↑　■330は左下から右上
var th=180;
var tw=250; //★原本80。銀河の川幅(恐竜の表示領域の幅)
var nh=10;  //★原本10。振幅
var nm=4;   //★原本4。周期
var np=5;   //★原本5。粒子最大速度

//指定ここまで---------------------------------------------------------------------------------
var nx=[], ny=[], nd=[], nhy=[], opa=[];//追加
var len=ga.length, rlen=rota.length;//追加
var w=(ww===0) ? window.innerWidth+50:ww;
var h=(hh===0) ? window.innerHeight+50:hh;
var ll=Math.pow(w*w/4+h*h/4,0.5);
var sss="";
for (var i=0;i<nn;i++){
nx[i]=Math.random()*ll*2;
ny[i]=Math.random()*tw-tw/2;
nd[i]=1+Math.random()*(np-1);
nhy[i]=Math.random()*nh;
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
var rrd=rota[Math.floor(Math.random()*rlen)];//追加
sss+="<img src="+myurl+ga[i%len]+" id='riv"+i+"' style='position:"+Pos+"; left:-500px; z-index:"+inZ+"; opacity:"+opa[i]+";transform: rotate("+rrd+"deg);'>";
document.write(sss);
}
function flow(){
for (i=0;i<nn;i++){
var ob=document.getElementById("riv"+i).style;
nx[i]=nx[i]+nd[i];
var xx=nx[i]-ll;
var yy=ny[i]+nh*Math.sin(nx[i]/ll*Math.PI*nm);
document.getElementById("riv"+i).style.left=(xx*Math.cos(th/180*Math.PI)-yy*Math.sin(th/180*Math.PI)+w/2)+"px";
document.getElementById("riv"+i).style.top=(xx*Math.sin(th/180*Math.PI)+yy*Math.cos(th/180*Math.PI)+h/2)+"px";
if(nx[i]>ll*2){nx[i]=0; ll=Math.pow(w*w/4+h*h/4,0.5);}
}
setTimeout(flow,spd);
}
flow();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>
降る上る１１■画像D■ サイズ実寸で流れる -雛形倶楽部- UP日時 : 2016/05/11

　降る上る１１■画像D■　サイズ実寸で流れる -雛形倶楽部- 　　　　UP日時 : 2016/05/11
