背景作成２■ランダム配置のタイトル文字

<!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: #aaa;/*★ここから３行は灰色の横ストライプの背景表示指定。不要なら削除*/
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%,transparent 50%);
background-size: 10px 10px;
background-attachment:fixed;/*★←JavaScriptで固定位置指定の時はこの１行も追加。固定位置でない時は削除*/
}

/*★タイトル文字指定。不要なら削除*/
.test1{
margin-top:50px;/*★位置指定*/
color: #fff;/*★文字色　白*/
font-size:24px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
background:#000;/*★背景色　黒*/
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<!--★下記１行がタイトル文字指定。不要なら削除-->
<p class="test1"><span style="color:#f00;">●</span>動く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("#ebb","#fda");  //★模様の文字の色指定。増減可能
var fnt=new Array("動くJavaScript");  //★タイトル文字指定。増減可能。複数指定の時は("タイトル","タイトル","タイトル")と記述
var rota=-20;                         //★文字の回転角度  90で右回りの90度。マイナス指定で左回り。見本は左回りの20度
var minSize=15;                       //★１番小さい模様の文字サイズ。上記■注意：参照
var maxSize=50;                       //★１番大きい模様の文字サイズ
var Imgn=100;                     　　//★タイトル文字の画面表示数。
var opa=0.5;  　　　　　　　　　　    //★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
var tp=-100;   　　　　　　　　　　   //★ランダム配置の上(top)からの位置。単位px
var lp=-200;     　　　　　           //★ランダム配置の左(left)からの位置。単位px
/*★↓タイトル文字の影指定をCSS形式で記述。輪郭線やボカシ用。好みで変更可。指定不要ならvar starcss="";で。見本は灰色のボカシ*/
var starcss="text-shadow: 0px 0px 5px #777;";

//指定ここまで------------------------------------------------------------------------
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;transform: rotate("+rota+"deg);"+starcss+"'>"+fnt[i%fnt.length]+"</div>";
document.write(star);
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
背景作成２■ランダム配置のタイトル文字 最終修正日 : 2016/04/07

　背景作成２■ランダム配置のタイトル文字　　　　　最終修正日 : 2016/04/07
