ぱーぷりん１■範囲個別■　画像が踊る

●2020/05/07：即時関数で囲んで、グローバル変数を消しました。
指定した範囲領域を複数の画像が移動するJavaScriptです。
「ぱーぷりん」のJavaScriptの特徴は、ふわふわ動く画像の１個１個に、個別に動作の指定と表示位置指定ができる点です。
ただしランダムに動作させる場合、画像の個別指定が逆に面倒な場合もあります。なので、JavaScriptを４個用意しました。
詳細は『ふわふわ』コーナーの◆ぱーぷりん・メニュー◆をお読み下さい。

画像を個別に指定して、動作の指定と表示位置指定ができます。
見本では、３種類の星は範囲領域全体を移動、風船は範囲領域の上端と下端を除く中央部分だけ移動にしてあります。
さらにこの見本では指定していませんが、「ぱーぷりん」の特徴の一つである、画像の複数表示を途中で１個表示に変更するかの設定もできます。

原本は京栄一級建築士事務所の■画像を不規則に移動させる使用例：羊の牧場から。

●画像(文字)指定の注意
『全面個別』『範囲個別』等、『個別』の時の画像(文字)指定方法は少し特殊です。
見本のように画像(文字)指定数より浮遊画像(文字)数が多い場合は、画像(文字)は指定数の一番上から順に選択され、一巡したらまた上から選択されます。

■範囲領域の中で、範囲個別指定の複数の文字が移動するJavaScriptはこちら→　ぱーぷりん２■範囲個別■文字が踊る

<!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:#017aaa;}/*背景色指定青色。不要なら削除*/

/*★#bsP必須。範囲指定領域の位置指定。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bsP{
position:relative;/*★必須。基準位置の指定*/
margin:50px auto;/*★位置指定（上下、左右）。位置指定自体はお好みで*/
background:url(gat126.jpg) no-repeat;/*背景画像サイズは横600px縦400px*/
width:600px;/*★必須。範囲の横幅指定*/
height:400px;/*★必須。範囲の縦幅指定*/
border-radius:20px;/*★角丸指定。お好みで。あまり大きくすると浮遊画像が範囲からはみだす*/
}

/*★タイトル文字指定。影付き。タイトルが一番上になります。不要なら削除*/
.test1{
position:absolute;/*★基本はこのままコピー。*/
width:100%;/*★文字領域の横のサイズ。100%で#bsPと同じ横幅。*/
text-align:center;/*★文字の中央位置指定。上記のwidth指定が必須*/
color: #ff0;/*★文字色　黄色*/
font-size:36px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
text-shadow:5px 5px 5px #ccc;/*★文字の影指定。灰色の影*/
z-index:2;/*★必須。重なり指定。浮遊要素より上にする。この行を指定しないと、浮遊要素より下になる*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記は範囲指定の位置。id="bsP"は必須。-->
<div id="bsP">
<p class="test1">動くJavaScript</p><!--★タイトル指定。不要ならこの１行は削除-->
</div>

<script type="text/javascript"><!--
/*==============================================================================
範囲個別指定。画像を不規則に移動させる random ver 1.00  （ぱーぷりんの溜まり場）
Javascript by http://kyoei.arrow.jp/jissai.html 京栄一級建築士事務所
HTML5対応と即時関数変更と範囲指定　★2020/05/07
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
var ugoku=new Array();   // この行は触らないで・・
// *****************************  入力事項  ******************************
// ======= 入力１：画像の種類と流れる範囲
// １～２番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// ３～４番目の数字で「表示幅」と「表示高さ」( px )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する
// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）
// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）
// ７番目以降で、出したい画像の種類を必要数だけ入力（0から順に）
//     画像が２つ以上あるときは、反復する度に、画像が変わる。
ugoku[0]=[0,0, 0,0, 50, 50, "msk1.png"];
ugoku[1]=[0,0, 0,0, 40, 50, "msk2.png"];
ugoku[2]=[0,0, 0,0, 45, 50, "msk3.png"];
ugoku[3]=[100,0, 0,200, 30, 30, "msd_o150.png"];//風船の画像

// ======= 入力２：動きの調整
var no = 6 ;  // 画面に同時に出す画像数を入力
var hsw=-1 ;  // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）。１個表示されるのは、ugoku[0]で指定した画像
var chg=50 ;  // 一秒当たりの描画の切替え回数（初期値 100）。小さいほど動きが速い
var inZ=1;    //★浮遊する文字と他の画像(文章)同士の重なり具合。1 以上を指定。他の画像(文章)との重なり具合で変更する
// *************************** 入力事項ここまで **************************

//  共通変数・配列の設定
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var off_w, off_h, doc_x, doc_y;
var xza=[], yza=[], img_w=[], img_h=[];
var stx=[], sty=[], xflg =[], yflg =[];
var marg_t=[], marg_l=[], disp_w=[], disp_h=[];
var Gy=[], Gx=[], Gp=[];

//  初期値の設定
var ingN=0, dpsw=1; brSize();
for(var i=0; i<no; i++){
Gy[i]=ingN; Gx[i]=ugoku[ingN].length-1; Gp[i]=6;
var sss="<img src="+ugoku[Gy[i]][Gp[i]]+" id='img"+i+"' style='position:absolute; z-index:"+inZ+";'>";
document.write(sss);
img_h[i]=$("img"+i).offsetHeight;
img_w[i]=$("img"+i).offsetWidth;
marg_t[i]=ugoku[ingN][0]; marg_l[i]=ugoku[ingN][1];
disp_w[i]=ugoku[ingN][2]; disp_h[i]=ugoku[ingN][3];
if(disp_w[i]===0){ disp_w[i]=doc_x-marg_l[i]; }
if(disp_h[i]===0){ disp_h[i]=doc_y-marg_t[i]; }
primX(i); primY(i);
xza[i]=marg_l[i]+Math.random()*(disp_w[i]-img_w[i]);
yza[i]=marg_t[i]+Math.random()*(disp_h[i]-img_h[i]);
if(ingN==(ugoku.length-1)){ ingN=0 } else{ ingN+=1 } }

// メインルーチン
function Zahyo(){ brSize();
for(i=0; i<no; ++i){
//■下記2行はブラウザIE以外で範囲指定に必須
img_h[i]=$("img"+i).offsetHeight;
img_w[i]=$("img"+i).offsetWidth;
xflg[i]--; yflg[i]--;
xza[i]+=stx[i]; yza[i]+=sty[i]
 if(xflg[i]<=0){ primX(i) }
 if(yflg[i]<=0){ primY(i) }

 if(xza[i]>marg_l[i]+disp_w[i]-img_w[i]){ hen=0;
   stx[i]=-stx[i]; xza[i]=marg_l[i]+disp_w[i]-img_w[i]; kirikae(); }   //右辺
 if( xza[i]<marg_l[i]){ hen=1;
   stx[i]=-stx[i]; xza[i]=marg_l[i]; kirikae(); }                      //左辺
 if(yza[i]>marg_t[i]+disp_h[i]-img_h[i]){ hen=2;
   sty[i]=-sty[i]; yza[i]=marg_t[i]+disp_h[i]-img_h[i]; kirikae(); }   //下辺
 if(yza[i]<marg_t[i]){ hen=3;
   sty[i]=-sty[i]; yza[i]=marg_t[i]; kirikae(); }                      //上辺

$("img"+i).style.left= off_w+xza[i]+"px"; $("img"+i).style.top =off_h+yza[i]+"px";
}
setTimeout(Zahyo,chg); }

// 初期データ発生
function primX(i){
stx[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
xflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }

function primY(i){
sty[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
yflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }

// ブラウザ等のサイズを調べる
function brSize(){
doc_x=bsP.clientWidth;//■範囲指定の横幅
doc_y=bsP.clientHeight;//■範囲指定の縦幅
off_w=bsP.clientLeft+bsP.offsetLeft;//■範囲指定の左からの位置
off_h=bsP.clientTop+bsP.offsetTop;//■範囲指定の上からの位置
}
function Size(i){
img_h[i]=$("img"+i).offsetHeight;
img_w[i]=$("img"+i).offsetWidth;
disp_w[i]=doc_x-img_w[i];
disp_h[i]=doc_y-img_h[i];
}

// 画像を切り替える
function kirikae(){
if (hsw>0 && i===0){
if(dpsw>0){ visi="hidden"; dpsw=-1; } else{ visi="visible"; dpsw=1; }
for(k=1; k<no; k++){ $("img"+k).style.visibility=visi; } }; 
var img_bh=img_h[i], img_bw=img_w[i];
if(hen===0){ xza[i]+=img_bw-img_w[i]; }
if(hen===2){ yza[i]+=img_bh-img_h[i]; } }
Zahyo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

ぱーぷりん１■範囲個別■ 画像が踊る UP日時 : 2020/05/07

　ぱーぷりん１■範囲個別■　画像が踊る　　　　UP日時 : 2020/05/07