ぱーぷりん１■全面個別■　画像が踊る

●2017/07/19：即時関数で囲んで、グローバル変数を消しました。
以前UPしていた「ぱーぷりん」のJavaScriptは、表示範囲の指定がうまくできなかったので削除しました。

全画面を複数の画像が移動するJavaScriptです。
「ぱーぷりん」のJavaScriptの特徴は、ふわふわ動く画像の１個１個に、個別に動作の指定と表示位置指定ができる点です。
ただしランダムに動作させる場合、画像の個別指定が逆に面倒な場合もあります。なので、JavaScriptを４個用意しました。
詳細は『ふわふわ』コーナーの◆ぱーぷりん・メニュー◆をお読み下さい。

この見本は、４個の中で一番原本に近いJavaScriptです。
画像を個別に指定して、動作の指定と表示位置指定ができます。
見本では、３種類の星は上端表示、風船は全面表示にしてあります。
見本では指定していませんが、画像の複数表示を、途中で１個表示に変更することもできます。
さらに画面スクロール時に、画像もスクロールするかしないかの選択もできます。

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

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

■全面個別指定の複数の文字が不規則に移動するJavaScriptはこちら→　ぱーぷりん２■全面個別■文字が踊る

■2016/07/19：重なり方指定を追加。画像や文章の上に浮くなら 1 。下に隠れるなら -1。見本は文章の下に隠れる「inZ=-1」。

<!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:url(fp10.png) repeat-x #017aaa;}/*背景上端横並び指定。背景画像は横267px縦200px。不要なら削除*/
--></style>

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*==============================================================================
全面個別指定。画像を不規則に移動させる random ver 1.00  （ぱーぷりんの溜まり場）
Javascript by http://kyoei.arrow.jp/jissai.html 京栄一級建築士事務所
HTML5対応と即時関数変更　★2017/07/19
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
var ugoku=new Array();   // この行は触らないで・・

// *****************************  入力事項  ******************************
// ======= 入力１：画像の種類と流れる範囲
// １～２番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// ３～４番目の数字で「表示幅」と「表示高さ」( px )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する
// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）
// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）
// ７番目以降で、出したい画像の種類を必要数だけ入力（0から順に）
//     画像が２つ以上あるときは、反復する度に、画像が変わる。
ugoku[0]=[0,0, 0,200, 35, 50, "msk1.png"];
ugoku[1]=[0,0, 0,200, 30, 50, "msk2.png"];
ugoku[2]=[0,0, 0,200, 25, 50, "msk3.png"];
ugoku[3]=[0,0, 0,0, 80, 80, "msd_o150.png"];

// ======= 入力２：動きの調整
var no = 6 ;  // 画面に同時に出す画像数を入力
var hsw=-1 ;  // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）。１個表示されるのは、ugoku[0]で指定した画像
var srl=-1 ;  // 画像を同時にスクロールさせるか？  （ yes=1 , no=-1 ）
var chg=50 ;  // 一秒当たりの描画の切替え回数（初期値 100）。小さいほど動きが速い
var inZ=-1;   //★画像や文章の上に浮くなら 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=window.innerWidth-18; doc_y=window.innerHeight-18;
off_w=window.pageXOffset; off_h=window.pageYOffset;
if(srl < 0){ off_w=0; off_h=0; } }

// 画像を切り替える
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>

ぱーぷりん１■全面個別■ 画像が踊る 最終修正日 : 2017/07/19

　ぱーぷりん１■全面個別■　画像が踊る　　　　最終修正日 : 2017/07/19