背景作成３■ランダム配置の回転文字

●2016/04/07：即時関数で囲んで、グローバル変数を消しました。
JavaScriptとCSSを利用して、背景を作成します。
ページを開くたびに、背景のハートと星の文字の配置が変わります。更新ボタンを押してみて下さい。→　
ハートと星は文字使用ですが、画像っぽく見えるように回転指定を入れて傾きを出しています。
ピンクのチェック柄の背景は、CSSだけでの作成で、CSS3 Patterns Gallery から。こちらのサイトでは使用したい柄をクリックすると、CSSの記述が出ます。

ランダム配置の原本は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: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 50%, transparent 50%),
linear-gradient(rgba(255, 255, 255, 0.3) 50%, transparent 50%),
#d9a;/*★チェック柄の色*/
background-size: 20px 20px;/*★チェック柄の横と縦のサイズ*/
background-attachment:fixed;/*★←JavaScriptで固定位置指定の時はこの１行も追加。固定位置でない時は削除*/
}

/*★タイトル文字指定。影付き。不要なら削除*/
.test1{
margin-top:100px;/*★位置指定*/
color: #fff;/*★文字色　白*/
font-size:30px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
text-shadow: 2px 2px 0px #f00;/*★文字の影指定。赤色*/
}
-->
</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("#fcc","#cfc","#fcf","#bef");  //★回転文字の色指定。増減可能
var fnt=new Array("&hearts;","☆");    //★回転文字指定。増減可能
var rota=new Array(-20,20,-45,45,-60); //★文字の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能
var minSize=20;                        //★１番小さい模様の文字サイズ。上記■注意：参照
var maxSize=50;                        //★１番大きい模様の文字サイズ
var Imgn=100;                     　　 //★回転文字の画面表示数。
var opa=0.8;  　　　　　　　　　　     //★回転文字透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
var tp=0;   　　　　　　　　　　       //★ランダム配置の上(top)からの位置。単位px
var lp=0;     　　　　　               //★ランダム配置の左(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[i%rota.length]+"deg);"+starcss+"'>"+fnt[i%fnt.length]+"</div>";
document.write(star);
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

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

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