ふわふわ６■キラキラ星（画像）

<!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:#ccc;}/*★背景色指定灰色　不要なら削除*/

/*★必須。キラキラ星の領域指定。位置とサイズは必須。*/
#wakuS{
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:50px auto 30px;/*★位置指定(上、左右、下)*/
background:url(gat104.jpg);/*★木の背景画像指定*/
width:800px;/*★必須。木の背景画像の横幅*/
height:400px;/*★必須。木の背景画像の縦幅*/
border-radius:30px;/*★角丸指定。お好みで*/
box-shadow:5px 5px 10px #333;/*★影指定。お好みで*/
}

/*★以下はキラキラ星領域の文字の指定。不要なら削除。#wakuSを基準としたposition:absolute;で指定*/
.title{ position:absolute; top:20px; right:70px; color:#f0f;font-size:30px; text-shadow:1px 1px 2px #fff;}
#wakuS p{ position:absolute; top:60px; right:20px; color:#fff; text-shadow:3px 3px 3px #000;}
/*★キラキラ星領域の文字の指定ここまで*/

--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->

<div id="wakuS"><!--★キラキラ星の表示領域開始。id="wakuSは必須"-->

<div id="zonS"></div>><!--★キラキラ星分。id="zonS"は必須-->

<div class="title">動くJavaScript</div><!--★タイトル分。不要なら削除-->
<p>－welcome－<br>コピーだけで動作する<br>JavaScriptのサンプルを紹介するサイト</p><!--★見本文章分。不要なら削除-->

</div><!--★キラキラ星の表示領域終了-->


<script type="text/javascript"><!--
/*===============================================================================
キラキラ星(画像) by 便利eelife http://eelife.org/java/ly/kirakirabosi.html（サイト：http://eelife.org/java/java_top.html）
★原本をHTML5対応にし、文字を画像へ。領域指定、角度、透過指定追加　2016/06/25
================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★星の画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var fnt=["pe9.gif","pe10.gif","pe12.gif","pp1.gif","pp2.gif"]; 

var rota=[0,45,90,180]; //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で

var no=20;      //★発生させる星の数。好みで
var gaw=19;     //★使用画像の最大横幅
var gah=19;     //★使用画像の最大縦幅
var maxOp=0.9;  //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.5; //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var spd=200;    //★星の画像が動く速度。(単位は千分の一秒)。原本200。小さいほど速い

//指定ここまで---------------------------------------------------------------------------------------
var w=wakuS.clientWidth, h=wakuS.clientHeight;//星の領域の横幅と縦幅。wakuSのサイズと同じ
var v;
var sss='<div style="position:absolute;top:0;left:0;width:'+w+'px;height:'+h+'px;">';
for (v=0; v<no; v++){
sss +='<img src='+fnt[v%fnt.length]+' id="Hosi'+v+'" style="position:absolute;top:-100px;left:-100px;">';}
sss +='</div>';
document.getElementById("zonS").innerHTML=sss;//範囲指定用追加
function act(){
v=Math.floor(Math.random()*no); // 乱数の発生０～星の発生数）まで
var j=Math.floor(Math.random()*rota.length);//追加
var opa=Math.random()*(maxOp-miniOp)+miniOp;//追加
var mx= Math.floor(Math.random()*(w-gaw));//星が端切れにならないよう-gaw追加
var my= Math.floor(Math.random()*(h-gah));//星が端切れにならないよう-gah追加
var ob=document.getElementById("Hosi"+v).style;
ob.opacity=opa; ob.transform="rotate("+rota[j]+"deg)";
ob.left =mx+"px"; ob.top=my+"px";
setTimeout(act,spd); 
}
act();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
ふわふわ６■キラキラ星（画像） 最終修正日 : 2016/06/25

　ふわふわ６■キラキラ星（画像）　　　　最終修正日 : 2016/06/25
