OpenSpace＋HIMAJIN１■キラキラ星が降る

<!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>OpenSpace＋HIMAJIN１■キラキラ星が降る</title>

<!--★ここから背景画像指定。不要なら削除-->
<style type="text/css"><!--
body{ 
background:url(me3.jpg) fixed no-repeat #061648;/*★背景画像指定。固定位置指定。繰り返し無し。背景色紺色*/
background-size:auto 100%;/*★背景画像縦幅100%指定。見本の画像の実寸は横800px縦600px*/
background-position:center;/*★中央位置指定*/
}
--></style>
<!--★ここまで背景画像指定-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=================================================================
キラキラ星が降る　　★2016/06/27　文字の複数指定、透過、角度、サイズ指定
画像が降る参考：By http://www.openspc2.org/reibun/javascript/graphic/022/index.html (サイト名 OpenSpace)
文字へ変更とキラキラ参考：By http://himajin.moo.jp/freejava/rain.html (サイト名 HIMAJIN)
================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★流れる文字の指定。文字を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var Fnt=["★","☆","★"];        

//★流れる文字の変化する色指定。色を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var Colors=["#ff0","#ff8","#8cc","#fff","#fc0"];

var rota=[45,-60,180];//★文字の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で
var Zx="-1";          //★文章の上に文字が流れるか？　上に流れる：1   下に隠れる：-1
var num=20;           //★表示する流れる文字の数
var minSize=10;       //★１番小さい流れる文字のサイズ。■注意：ブラウザChromeとOperaでは10px未満の文字は全部10pxで表示される
var maxSize=40;       //★１番大きい流れる文字のサイズ
var spd=80;           //★原本100。流れる速さ。小さくするほど速い
var maxOp=0.9;        //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.6;       //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//★流れる文字の影指定をCSS形式で記述。白のボカシ指定。好みで変更可。ただし指定するとPC全体が遅くなる。不要なら var ts=""; で
var ts="text-shadow:0px 0px 10px #fff;";

//指定ここまで--------------------------------------------------------------------------
var sx=[],sy=[],sp=[],sz=[], opa=[];//追加有り
var len=Fnt.length, i=0;
var w=window.innerWidth+maxSize; var h=window.innerHeight+maxSize;
var sss="";
for(i=0;i<num;i++){
sx[i]=Math.floor(Math.random()*w);
sy[i]=Math.floor(Math.random()*h);
sp[i]=Math.floor(Math.random()*6)+2;//修正
sz[i]=Math.floor(Math.random()*(maxSize-minSize)+minSize);
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
var rrd=rota[Math.floor(Math.random()*rota.length)];//追加
sss +="<span id='fn"+i+"' style='transform:rotate("+rrd+"deg); "+ts+"'>"+Fnt[i%len]+"</span>";
}
document.write(sss);
function moveShow(){
for(i=0;i<num;i++){
sy[i]+=sp[i];
if(sy[i]>h){sy[i]=0;}//■-10を0へ
var clr=Colors[Math.floor(Math.random()*Colors.length)];
var ob=document.getElementById("fn"+i).style; 
ob.top=-maxSize+sy[i]+"px"; ob.left=-maxSize+sx[i]+"px"; //■-maxSizeを追加
ob.color=clr; ob.fontSize=sz[i]+"px"; ob.zIndex=Zx; ob.opacity=opa[i]; ob.position="fixed";
}
setTimeout(moveShow,spd)
}
moveShow();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
OpenSpace＋HIMAJIN１■文字D■ キラキラ星が降る 最終修正日 : 2016/06/27

　OpenSpace＋HIMAJIN１■文字D■　キラキラ星が降る　　　　最終修正日 : 2016/06/27
