合体４■動く背景に泡が上る

●2016/06/13：即時関数で囲んで、グローバル変数を消しました。
画面左端の範囲指定の中で、イルカの背景画像が移動し、泡が上ります。
前回掲載分と似ていますが、ソースは修正してあります。

まずイルカ画像は、前回はbodyの背景画像で、表示は「repeat-y」の左端一列の縦並び指定でした。
今回、イルカ画像はdivで作成した範囲（id="zon"）の背景画像で表示は敷詰（何も指定しないと初期値は敷詰）です。
敷詰にすることで、背景画像の移動方向を自由に変更できます。
普通は、範囲（id="zon"）の位置指定は「position指定」であるなら、「relativeでもabsoluteでもfixedでも可」です。
しかし今回は、画面の縦幅一杯に表示したかったので、範囲（id="zon"）の縦幅100%指定し、スクロールしても範囲が切れないように「fixed」指定にしました。
範囲の位置指定については、お好みでCSSを変更して下さい。
なお、イルカの背景画像の移動には、JavaScriptではなくCSSを使用しています。
CSSの移動方向の指定方法は、合体元の説明を参考にして下さい。

awa1.png

awa2.png

awa3.png

awa4.png

awa5.png

私の作成した
背景透過png。
右クリックで
どうぞ。

■合体元JavaScriptはこちら→　OpenSpace３■画像D■画像が流れる-４方向選択(範囲指定) ＋背景移動１-１■CSSbox背景移動

<!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:#aee;}/*★背景色指定水色。この行は不要なら削除*/

/*★スライドの範囲指定。必ず#zonを指定*/
#zon{
animation: bMove 8s linear infinite;/*★必須。移動の「bMove」の時間指定。1sは1秒*/
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
position:fixed;top:0;left:0;z-index:-1;/*★必須。位置指定。固定。左上指定。bodyの背景のように扱うため z-indexはマイナス指定*/
background:url("../bg/mh3.png") ;/*★イルカの背景画像、敷詰。敷詰にすることで移動方向は変更可。背景画像の横幅198px縦幅198px*/
width:198px;/*★横幅指定。イルカの背景画像と同じ横幅*/
height:100%;/*★縦幅指定。縦幅一杯*/
}

/*★必須。移動の動きの指定。名前は「bMove」*/
@keyframes bMove {
0% {background-position: 0 0;}
100% {background-position: 0px -198px;};}/*★縦移動の時は必ず使用する背景画像の縦幅を記述。マイナス指定で上向き*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記１行が範囲指定の位置。id="zon"は必須。-->
<div id="zon"></div>

<!--★ここからコピー-->
<script type="text/javascript"><!--
/*================================================================================
画像が流れる・４方向選択の範囲指定： 　複数画像、透過指定、HTML5対応、４方向選択、範囲指定へ改造  ★2016/06/13
By　http://www.openspc2.org/reibun/javascript/graphic/022/index.html (サイト名 OpenSpace)
==================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var move=2;//★画像の流れる向き指定 1=下へ 2=上へ 3=左から右 4=右から左*/

//★流れる画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var snow =["awa1.png","awa2.png","awa3.png","awa4.png","awa5.png"];

var num=20;         //★流れる画像表示数
var imgw=25;        //★流れる画像の最大横サイズ 
var imgh=25;        //★流れる画像の最大縦サイズ
var spd=50;         //★原本100。小さいほど速い
var maxOp=0.9;      //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.4;     //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//指定ここまで--------------------------------------------------------------------------
var sx=[], sy=[], sp=[], opa=[];//追加有り
var len=snow.length, i=0;
var zonw=zon.clientWidth, zonh=zon.clientHeight;//範囲指定に修正
var w=zonw+imgw, h=zonh+imgh;//画像表示幅追加
var sss='<div style="position:absolute;width:'+zonw+'px;height:'+zonh+'px;">';
for (i=0; i<num; i++){
sx[i] = Math.floor(Math.random()*w);
sy[i] = Math.floor(Math.random()*h);
sp[i] = Math.floor(Math.random()*6)+2;//修正
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
sss +='<img src='+snow[i%len]+' id="sn'+i+'">';
}
sss +='</div>';
document.getElementById("zon").innerHTML=sss;//■範囲指定用追加

function moveSnow(){
for (i=0; i<num; i++){
if (move===1) { sy[i] +=sp[i]; if(sy[i]>h){ sy[i]=0; }}//★下向き
if (move===2) { sy[i] -=sp[i]; if(sy[i]<0){ sy[i]=h; }}//★上向き
if (move===3) { sx[i] +=sp[i]; if(sx[i]>w){ sx[i]=0; }}//★左から右
if (move===4) { sx[i] -=sp[i]; if(sx[i]<0){ sx[i]=w; }}//★右から左
var ob=document.getElementById("sn"+i).style;
ob.top=-imgh+sy[i]+"px"; ob.left=-imgw+sx[i]+"px";
ob.position="absolute"; ob.opacity=opa[i];//修正
}
setTimeout(moveSnow,spd);
}
moveSnow();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

合体４■Up+Mv■ 動く背景に泡が上る UP日時 : 2016/06/13

　合体４■Up+Mv■　動く背景に泡が上る　　　　　UP日時 : 2016/06/13