ふわふわ５■キラキラ星（文字）

<!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(yt2.jpg);/*★七夕の背景画像指定*/
width:450px;/*★必須。七夕の背景画像の横幅*/
height:300px;/*★必須。七夕の背景画像の縦幅*/
border-radius:50px;/*★角丸指定。お好みで*/
box-shadow:3px 3px 10px #333 inset;/*★内側の影指定。お好みで*/
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

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

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

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

<span style="position:absolute;top:50px;right:20px;color:#fff;">―動くJavaScript―</span><!--★文章指定。position:absolute使用。見本なので削除-->

</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=["★","☆","★"]; 

//★星の色指定。増減可能。色を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var clrs=["#fff","#ff0","aqua","pink"]; 

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

var no=20;      //★発生させる星の数。好みで
var fmax=50;    //★文字の最大サイズ。Set the maximal-size of your snowflaxes
var fmin=10;    //★文字の最小サイズ。クロムとオペラは10px以下は10px表示 Set the minimal-size of your snowflaxes
var maxOp=0.9;  //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.5; //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var spd=300;    //★文字が動く速度。(単位は千分の一秒)。原本200。小さいほど速い

var fcss="text-shadow:0px 0px 2px #333;";//★CSSでの星の文字の影指定。見本は黒の輪郭線。不要ならvar fcss="";で

//指定ここまで---------------------------------------------------------------------------------------
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 +='<span id="Hosi'+v+'" style="position:absolute;top:-100px;left:-100px; '+fcss+'">'+fnt[v%fnt.length]+'</span>';}
sss +='</div>';
document.getElementById("zonS").innerHTML=sss;//範囲指定用追加
function act(){
v=Math.floor(Math.random()*no); // 乱数の発生０～星の発生数）まで
var i=Math.floor(Math.random()*clrs.length); // 乱数の発生０～clrs.length（配列 clrs の色の数）
var j=Math.floor(Math.random()*rota.length);//追加
var fs=Math.floor(Math.random()*(fmax-fmin)+fmin);//追加
var opa=Math.random()*(maxOp-miniOp)+miniOp;//追加
var mx= Math.floor(Math.random()*(w-fmax));//星が端切れにならないよう-fmax追加
var my= Math.floor(Math.random()*(h-fmax));//星が端切れにならないよう-fmax追加
var ob=document.getElementById("Hosi"+v).style;
ob.color=clrs[i]; ob.fontSize=fs+"px"; 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
