合体１７■動く海底のキラキラ魚

●2016/06/27：即時関数で囲んで、グローバル変数を消しました。
横移動する海底で、魚が発生したり消滅したりするJavaScriptです。
横移動する海底画像は、横並び用の壁紙を使用しているので、継ぎ目が無いので、横幅は画像横幅より大きく指定しました。
海底が横移動すると、魚は静止のままでも泳いで見えます。
でも「キラキラ星」のJavaScriptで、魚の位置をランダムに移動させることで、変化を付けています。
ただ「キラキラ星」の速度が速いと魚が泳いでいるように見えないので、速度を遅く指定してあります。
なお、海底の横移動は JavaScript ではなく CSS を利用しています。

領域の中の文章部分は、<div id="wakuS">～～～</div>の領域中で、「position:absolute;」指定で記述します。
「position:absolute;」の基準位置は「id="wakuS"」になります。
領域の中の文字の位置指定の方法の参考はAllAboutから。

■合体元JavaScriptはこちら→　背景移動１-１■CSS box背景移動＋ふわふわ６■キラキラ星（画像）

<!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"><!--

/*★必須。キラキラ星の領域指定。位置とサイズは必須*/
#wakuS{
animation: bMove 15s linear infinite;/*★必須。海底移動の「bMove」の時間指定。1sは1秒。小さいほど速い*/
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:50px auto;/*★位置指定(上下、左右)*/
background:url(pis5.jpg);/*★海底の背景画像指定*/
width:800px;/*★必須。海底の背景画像の横幅より大きく指定。同じでも可。画像実寸は横幅500px縦幅300px*/
height:300px;/*★必須。海底の背景画像の縦幅*/
border-radius:30px;/*★角丸指定。お好みで*/
box-shadow:5px 5px 10px #333;/*★影指定。お好みで*/
}

/*★必須。海底移動の動きの指定。名前は「bMove」*/
@keyframes bMove {
0% {background-position: 0 0;}
100% {background-position: 500px 0;}/*★横移動の時は必ず使用する背景画像の横幅を記述。マイナス指定で逆向き*/
}

/*★以下は海底領域の文字の指定。不要なら削除。#wakuSを基準としたposition:absolute;で指定*/
.title, #wakuS p{ position:absolute; right:0px;width:300px; text-align:center; }
.title{ top:20px; color:#f0f;font-size:30px; text-shadow:1px 1px 2px #fff;}
#wakuS p{ top:50px; 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/27。横移動はCSS
================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

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

var no=15;      //★発生させる魚の数。好みで
var gaw=50;     //★使用画像の最大横幅
var gah=65;     //★使用画像の最大縦幅
var maxOp=1;    //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.8; //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var spd=1000;   //★魚の画像が動く速度。(単位は千分の一秒)。原本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>

合体１７■Mv+Fl■ 動く海底のキラキラ魚 UP日時 : 2016/06/27

　合体１７■Mv+Fl■　動く海底のキラキラ魚　　　　UP日時 : 2016/06/27