背景作成６■グラデ背景の回転画像

●2016/04/07：即時関数で囲んで、グローバル変数を消しました。
JavaScriptとCSS、今回はさらに画像を利用して、背景を作成します。
ページを開くたびに、背景の魔女とコウモリの配置が変わります。更新ボタンを押してみて下さい。→　
グラデーション背景は、CSSだけでの作成で、ほんっとにはじめてのHTML5 から。

月は画像ではなく CSS での作成です。
画像は、魔女画像が２種類、コウモリ１種類で、合計３種類の使用です。
変化を出すために回転指定を入れて、画像の向きを変えていますが、画像サイズは実寸使用です。
画像サイズもランダムに変化させる背景作成の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>

<!--★ここからコピー。グラデーションの背景指定と月とタイトル指定。不要なら削除-->
<style type="text/css"><!--
/*★グラデーションの背景指定*/
body {
background:#3cc;/*★グラデーションが動作しない時の用心のため背景色指定。水色*/
background: linear-gradient(#3cc, #eee);/*★上からのグラデーション指定。水色、薄い青色*/
background-attachment:fixed;/*★背景位置固定指定。中身が無くてもグラデーションが画面縦幅一杯表示*/
}

/*★タイトル文字指定。影付き*/
.test1{
color: #fff;/*★文字色　白色*/
font-size:30px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
text-shadow:0 0 20px #00f;/*★文字の影指定。青色のボカシ*/
position:absolute;/*★以下4行は位置指定と重なり指定。タイトルはハロウィン画像より上*/
top:150px;
left:40px;
z-index:1;
}
/*★月の指定*/
.moon{
background:#ff0;/*★背景色指定黄色*/
width:250px;/*★横幅指定*/
height:250px;/*★縦幅指定*/
border-radius:50%;/*★円形指定*/
box-shadow:0 0 50px #f90 inset;/*★月の内側の影指定。オレンジ色のボカシ*/
position:absolute;/*★以下4行は位置指定と重なり指定。月はハロウィン画像より下*/
top:80px;
left:30px;
z-index:-2;
}
--></style>
<!--★ここまでコピー。不要なら削除。bodyの中にもコピーがあります-->

</head>
<body>

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

<!--★文章見本。不要なら削除-->
<div style="margin:350px 15% 30px; padding:30px;border-radius:20px; background-color:rgba(255,255,255,0.9);">
JavaScriptとCSS、今回はさらに画像を利用して、背景を作成します。<br>
</div>

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*================================================================================
背景作成・グラデ背景の回転画像   ★2016/04/07
ランダム配置の参考サイト： http://himajin.moo.jp/freejava/star.html(サイト名：HIMAJIN)
==================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var posi="fixed"; 　　　　　　　　  //★スクロールに合わせて移動するか？fixed推奨。位置固定：fixed　移動：absolute
var bga= new Array("kc22.png","kc23.png","kc23b.png");   //★画像指定。増減可能
var rota=new Array(-10,10,-20,20,30); 　　   //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能
var Imgn=20;                     　 //★画像の画面表示数。
var opa=0.8;  　　　　　　　　　　  //★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
var tp=0;   　　　　　　　　　　    //★ランダム配置の上(top)からの位置。単位px
var lp=0;     　　　　　            //★ランダム配置の左(left)からの位置。単位px

//指定ここまで------------------------------------------------------------------------
var w=window.innerWidth, h=window.innerHeight;
for (i=0; i < Imgn; i++){ 
var xpx=Math.floor(Math.random()*w)+lp, ypx=Math.floor(Math.random()*h)+tp;
var rrd=Math.floor(Math.random()*rota.length);
star="<img src='"+bga[i%bga.length]+"' style='position:"+posi+";left:"+ xpx +"px;top:"+ ypx +"px;z-index:-1;opacity:"+opa+";transform: rotate("+rota[rrd]+"deg);'>";
document.write(star);
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景作成６■グラデ背景の回転画像 最終修正日 : 2016/04/07

　背景作成６■グラデ背景の回転画像　　　　　最終修正日 : 2016/04/07