合体５■動く背景に雪が降る

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

まず雪景色画像は、前回はbodyの背景画像で、表示は「repeat-x」の上端一列の横並び指定でした。
今回、雪景色画像はdivで作成した範囲（id="zon"）の背景画像で表示は敷詰（何も指定しないと初期値は敷詰）です。
敷詰にすることで、背景画像の移動方向を自由に変更できます。
範囲（id="zon"）の位置指定は「position指定」であるなら、「relativeでもabsoluteでもfixedでも可」です。
今回は、「absolute」指定です。
範囲の位置指定については、お好みでCSSを変更して下さい。
なお、雪景色の背景画像の移動には、JavaScriptではなくCSSを使用しています。
CSSの移動方向の指定方法は、合体元の説明を参考にして下さい。

wbw10.png

wbw15.png

wb10.png

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

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

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

</head>
<body>

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

<!--★下記２行のサンタ画像とタイトル文字は、記述見本なので削除-->
<img src="../bg/katu1.gif" style="position:absolute; top:100px; right:200px;width:205px;height:36px;">
<p style="position:absolute; top:150px; left:20px;font-size:130%; font-weight:bold; color:green;">◆◆動くJavaScript◆◆</p>


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

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

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

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