ふわふわ■中心点３　光（文字）が噴き出す１

指定した場所から、自動で大量の文字が噴き出すJavaScriptです。文字を装飾することで、とても綺麗になります。
原本（宇宙空間２）をHTML5対応にし、いろいろ追加しました。
・噴き出す文字の位置が、スクロールしても固定指定だったのを、固定と自由の選択可能へ。
・噴き出す文字の位置を上から1/2、左から2/3という分数形式で、指定可能へ。
・文字色だけ複数指定だったのを、文字種類、文字サイズも複数指定へ。
・透過と、CSSの影指定によるボカシが可能へ。
原本はHIMAJINから。

■HTML5では問題ないのですが、HTML4ではブラウザFirefoxのみ、画面一杯に中身（空間）が無いと、中身のある部分だけでしか動作しません。その対応策として、下部に『見えない罫線』が指定してあります。不要なら削除して下さい。
■2015/04/11 付記：上記の対策法では効果がありませんでした。CSSでbodyにwidth:100%;height:100%;指定をすることで、動作可能です。

■画像が噴き出すJavaScriptはこちら→　ふわふわ■中心点■４　画像が噴き出す１

ソースの中をどこでも左クリックで『すべて選択』→右クリックで『コピー』を指定。ソースエリアの外をクリックすると『すべて選択』は消えます。

<!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>

<!--★コピーここから。HTML4時のブラウザForefox対策用。画面一杯に中身が無いと動作しないため-->
<style type="text/css"><!--
body {width:100%; height:100%;}
--></style>
<!--★コピーここまで。bodyにもコピー有り-->

</head>
<body bgcolor="#000000">

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*==============================================================================
光（文字）が噴き出す By http://himajin.moo.jp/freejava/starwars2.html(サイト：himajin.moo.jp)
★HTML5対応にし、文字色以外にも文字種類と文字サイズの複数指定、位置自由指定、ボカシ用影、透過等追加。2015/04/10
================================================================================*/
var posi="absolute"; //★噴き出す文字の位置指定。スクロールしても固定ならfixed　スクロールして移動するならabsolute
var Wps=1/2;         //★噴き出す位置の左からの位置。全画面の分数指定。1/4にすると左側に寄ります
var Hps=1/2;         //★噴き出す位置の上からの位置。全画面の分数指定。2/3にすると下側に寄ります
var opa=0.8;         //★噴き出す文字の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var starint=20;      //★噴き出す文字の表示数 
var spd=40;          //★噴き出す速度。原本40。数値が小さいほど速い

var moj=new Array("○","+","*");                 //★噴き出す文字指定。増減可能。+*・●★◆♪ ハート(特殊文字)等。
var fsz=new Array("18px","24px","12px");         //★噴き出す文字のサイズ。増減可能。px指定でも%指定でも可能
var Clrs=new Array("#ff9","#999","#fff","#9ff"); //★噴き出す文字の色。増減可能

/*★↓噴き出す文字の影指定をCSS形式で記述。白いボカシ用。好みで変更可。指定不要ならvar snowcss="";で。*/
var snowcss="text-shadow: 2px 2px 5px #fff,-2px 2px 5px #fff,2px -2px 5px #fff,-2px -2px 5px #fff;";

//------------------指定項目以上------------------------------------------------------------------------
var i=0;
for (i = 0; i < starint; i++) {
document.write("<div style='position:"+posi+"; top:0; left:0;z-index:2; opacity:"+opa+"; font-size:"+fsz[i%fsz.length]+"; color:"+Clrs[i%Clrs.length]+";"+snowcss+"'id='star"+i+"'>"+moj[i%moj.length]+"</div>");
}
var x=new Array(), y=new Array(),scrnx=new Array(),scrny=new Array();
var dbw=document.documentElement.clientWidth-50;
var dbh=document.documentElement.clientHeight-50;
for (i = 0; i < starint; i++) {do{n=0;
x[i]=(Math.floor(Math.random()*100)-50)/10;
y[i]=(Math.floor(Math.random()*100)-50)/10;
if(!x&&!y)n++} while (n);
scrnx[i]=dbw*Wps+x[i]*5; scrny[i]=dbh*Hps+y[i]*5;
}
function momeShow(){
for (i = 0; i < starint; i++) {
document.getElementById("star"+i).style.top=scrny[i]+"px";
document.getElementById("star"+i).style.left=scrnx[i]+"px";
if(dbw-40<scrnx[i] || 0>scrnx[i] || dbh-40<scrny[i] || 0>scrny[i]){scrnx[i]=dbw/2;scrny[i]=dbh/2;
do{n=0;
x[i]=(Math.floor(Math.random()*100)-50)/10;
y[i]=(Math.floor(Math.random()*100)-50)/10;
if(!x&&!y)n++} while (n);
scrnx[i]=dbw*Wps+x[i]*5; scrny[i]=dbh*Hps+y[i]*5;
}
else{scrnx[i]+=x[i];scrny[i]+=y[i];x[i]=x[i]*1.1;y[i]=y[i]*1.1;}
}}
setInterval('momeShow()',spd);
// --></script>

<!--★ここまでコピー-->

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

中心点３ 光（文字）が噴き出す１ 最終修正日 : 2015/04/11

　中心点３　光（文字）が噴き出す１　　　　最終修正日 : 2015/04/11