文字が降る上る９■銀河（文字）-雛形倶楽部-

<!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:#094;/*★グラデーションが効かない時のために、青色背景指定*/
background:linear-gradient(to bottom right, #dff,#09f);/*★斜めのグラデーション指定。水色、青色*/
background-attachment:fixed;/*★背景位置固定指定。グラデーションを高さ100%表示にするため*/
}
--></style>
<!--★背景指定ここまで-->

</head>
<body>

<img src="kc27a.png" style="margin-left:30px;width:250px:height:210px;"><!--★彦星の画像。不要なら削除-->
<img src="kc27b.png" style="position:absolute;top:200px;right:30px;width:240px;height:270px;"><!--★織姫の画像。不要なら削除-->

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

//★文字指定。増減可能。色を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var moj=["★","★","・"];
var Clrs=["#ff0","#ff0","#fcc","#fff","#cfc"]; //★文字の色。増減可能

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

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

/*★↓流れる文字の影指定をCSS形式で記述。黒の輪郭線指定。好みで変更可。指定不要ならvar fcss="";で。*/
var fcss="text-shadow:1px 1px 2px #000,-1px -1px 2px #000;";

//指定ここまで---------------------------------------------------------------------------------
var nx=[], ny=[], nd=[], nhy=[], nrSize=[], opa=[];//追加
var len=moj.length, clen=Clrs.length, rlen=rota.length;//追加
var w=(ww===0) ? window.innerWidth+maxSize:ww;
var h=(hh===0) ? window.innerHeight+maxSize: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;
nrSize[i]=Math.floor(Math.random()*(maxSize-minSize)+minSize);//追加
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
var ran= Math.floor(Math.random()*clen);//追加
var rrd=rota[Math.floor(Math.random()*rlen)];//追加
sss+="<span id='riv"+i+"' style='position:"+Pos+"; left:-500px; z-index:"+inZ+"; opacity:"+opa[i]+"; font-size:"+nrSize[i]+"px; color:"+Clrs[ran]+"; transform:rotate("+rrd+"deg);"+fcss+"'>"+moj[i%len]+"</span>";
document.write(sss);
}
function flow(){
for (i=0;i<nn;i++){
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/10

　降る上る９■文字D■　銀河（文字）-雛形倶楽部-　　　　UP日時 : 2016/05/10
