OpenSpace＋HIMAJIN２■キラキラ星が流れる４方向

●2016/06/27：即時関数で囲んで、グローバル変数を消しました。
キラキラ光る大小の星が流れるJavaScriptです。
星の流れる方向を、数字選択できます。 1=上→下　2=下→上　3=左→右　4=右→左。
見本では「3」を選択して、「左→右」へ星が流れます。４方向のうち１方向を、自由に選択可能です。
七夕画像とこの文章には、JavaScriptのソースの中で上に星が流れない指定にしています。画像や文章の上に星が流れる指定も可能です。
UFO画像には画像そのものに、上に星が流れる指定を付けています。
■2016/06/27：文字サイズの複数指定に追加して、文字種類の複数指定、ランダム透過指定、角度指定を付けました。

『画像が降る』原本は 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:#158;}/*★背景色指定。紺色。不要なら削除*/
--></style>

</head>
<body>

<img src="LH3.gif" style="position:absolute; top:100px; right:200px;"><!--★七夕画像。見本のため削除-->
<img src="tono5.gif" style="position:absolute; top:150px; left:200px; width:70px; z-index:-2;"><!--★UFO画像。 z-index:-2;指定で星が画像の上に流れる。見本のため削除-->


<!--★ここからコピー　位置は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 move=3;          //★文字の流れる向き指定 1=上→下　2=下→上　3=左→右　4=右→左

//★流れる文字の指定。文字を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
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=15;       //★１番小さい流れる文字のサイズ。■注意：ブラウザChromeとOperaでは10px未満の文字は全部10pxで表示される
var maxSize=50;       //★１番大きい流れる文字のサイズ
var spd=50;           //★原本100。流れる速さ。小さくするほど速い
var maxOp=1;          //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.8;       //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

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

//指定ここまで--------------------------------------------------------------------------
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++){
if(move===1){sy[i]+=sp[i];if(sy[i]>h)sy[i]=0;}//■上→下
if(move===2){sy[i]-=sp[i];if(sy[i]<0)sy[i]=h;}//■下→上
if(move===3){sx[i]+=sp[i];if(sx[i]>w)sx[i]=0;}//■左→右
if(move===4){sx[i]-=sp[i];if(sx[i]<0)sx[i]=w;}//■右→左
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