背景作成７■グラデ背景の回転画像サイズ変化

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

今回は画像を回転して向きを変化させる他に、画像サイズもランダムに変化させられます。
使用した３種類の花の画像の画像は、横サイズ70pxで全部同じ大きさです。
たとえば１種類の画像しかなくても、サイズと向きを変化させることで面白い背景が作成できます。
画像サイズは実寸で、画像の向きだけを変化させる背景作成の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:#ade;/*★グラデーションが動作しない時の用心のため背景色指定。水色*/
background: linear-gradient(to right, #ade, #eee 50%, #fde 90%);/*★左からのグラデーション指定。水色、灰色、ピンク*/
background-attachment:fixed;/*★背景位置固定指定*/
}

/*★タイトル文字指定。影付き*/
.test1{
margin-top:100px;/*★位置指定*/
color: #fff;/*★文字色　白色*/
font-size:30px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
text-shadow:0 0 20px #00f;/*★文字の影指定。青色のボカシ*/
}
--></style>
<!--★ここまでコピー。不要なら削除。bodyの中にもコピーがあります-->

</head>
<body>

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

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*================================================================================
背景作成・グラデ背景の回転画像サイズ変化   ★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 bga= new Array("fi6.png","fi7.png","fi8.png");   　//★画像指定。増減可能
var rota=new Array(-20,20,-45,45,180); //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=new Array(0);で
var minW=20;                    //★１番小さい画像表示横サイズ(実寸ではない)
var maxW=90;                    //★１番大きい画像表示横サイズ(実寸ではない)
var Imgn=40;                    //★画像の画面表示数。
var opa=0.7;  　　　　　　　　　//★画像透過指定。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 sz=Math.floor(Math.random()*(maxW-minW) + minW);
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+"; width:"+sz+"px;transform: rotate("+rota[rrd]+"deg);'>";
document.write(star);
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景作成７■グラデ背景の回転画像サイズ変化 最終修正日 : 2016/04/07

　背景作成７■グラデ背景の回転画像サイズ変化　　　　　最終修正日 : 2016/04/07