背景作成１■ランダム配置の模様文字

●2016/04/07：即時関数で囲んで、グローバル変数を消しました。
JavaScriptとCSSを利用して、背景を作成します。
ページを開くたびに、背景の模様の配置が変わります。更新ボタンを押してみて下さい。→　

この色違いのバージョンは、当サイトの表（テーブル）のページで使用しています。こちらは
CSSでbodyの背景色を#ccf (水色)、
JavaScriptの中の
「模様の文字の色指定」を　var starC= new Array("#ccc"); (灰色)
「模様の文字の影指定」を　var starcss="text-shadow: 0px 0px 20px #00f;"; (青色のボカシ)
としています。

ランダム配置の原本は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>背景作成１■ランダム配置の模様文字</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{
background: #fde;/*★背景色ピンク*/
}
/*★タイトル文字指定。影付き。不要なら削除*/
.test1{
margin-top:50px;
color: #f00;
font-size: 40px;
font-weight: bold;
text-shadow: 10px 10px 20px #000000;
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<!--★下記１行がタイトル文字指定。不要なら削除-->
<p class="test1">●動くJavaScript●</p>

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*================================================================================
背景作成・ランダム配置の模様文字　 ■注意：ブラウザChromeとOperaでは10px未満の文字は全部10pxで表示される　★2016/04/07
ランダム配置の参考サイト： http://himajin.moo.jp/freejava/star.html(サイト名：HIMAJIN)
文字サイズ変更の参考サイト： http://web.archive.org/web/20010124095600/http://www.suisen.sakura.ne.jp/~ikitai/js/ (星空)
==================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var posi="fixed"; 　　　　　　　　      //★スクロールに合わせて移動するか？fixed推奨。位置固定：fixed　移動：absolute
var starC= new Array("#fff");           //★模様の文字の色指定。増減可能。複数指定の時は("色","色","色")と記述
var fnt=new Array("●","◎","○","▲"); //★模様の文字指定。増減可能
var minSize = 20;                       //★１番小さい模様の文字サイズ。上記■注意：参照
var maxSize = 100;                      //★１番大きい模様の文字サイズ
var Imgn=100;           //★模様の文字の画面表示数。
var opa=0.5;  　　　　　//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
var tp=0;   　　　　　　//★ランダム配置の上(top)からの位置。単位px
var lp=0;     　　　　　//★ランダム配置の左(left)からの位置。単位px
/*★↓模様の文字の影指定をCSS形式で記述。輪郭線やボカシ用。好みで変更可。指定不要ならvar starcss="";で。見本は赤色のボカシ*/
var starcss="text-shadow: 0px 0px 20px #f00;";

//指定ここまで---------------------------------------------------------------------
var doc_width =window.innerWidth;
var doc_height=window.innerHeight;
for (i=0; i < Imgn; i++){ 
var xpx = Math.floor(doc_width*Math.random())+lp; 
var ypx = Math.floor(doc_height*Math.random())+tp;
var sz= Math.floor(Math.random()*(maxSize-minSize) + minSize);
star="<div style='position:"+posi+";left:"+ xpx +"px;top:"+ ypx +"px;z-index:-1;opacity:"+opa+";color:"+starC[i%starC.length]+";font-size:"+sz+"px;"+starcss+"'>"+fnt[i%fnt.length]+"</div>";
document.write(star);
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景作成１■ランダム配置の模様文字 最終修正日 : 2016/04/07

　背景作成１■ランダム配置の模様文字　　　　　最終修正日 : 2016/04/07