ぱーぷりん２■範囲個別■　文字が踊る

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

/*★#bsP必須。範囲指定領域の位置指定。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bsP{
position:relative;/*★必須。基準位置の指定*/
margin:50px auto;/*★位置指定（上下、左右）。位置指定自体はお好みで*/
background:url(usi9.jpg) no-repeat;/*背景画像サイズは横500px縦500px*/
width:500px;/*★必須。範囲の横幅指定*/
height:500px;/*★必須。範囲の縦幅指定*/
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, 30, 50, "&hearts;"];//『&hearts;』はハート
ugoku[1]=[300,0, 0,0, 50, 50, "★"];
ugoku[2]=[300,0, 0,0, 60, 40, "★"];
ugoku[3]=[350,0, 0,0, 50, 50, "●"];
ugoku[4]=[350,0, 0,0, 40, 40, "●"];

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

// ======= 入力３：ランダム等追加指定

//★文字の色指定。増減可能。色を順番に"●",と区切って並べる。ランダムなので上記文字数より多くても少なくても可。最後の ] の前には ,(カンマ) 無し
var clrs=["#fff","#ff0","#acf","pink","#ff5"]; 
var rota=[45,-20,-35]; //★文字の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で
var maxSize=50;      //★文字の最大サイズ
var minSize=13;      //★文字の最小サイズ。クロムとオペラは10px以下は10px表示
var maxOp=0.7;       //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.2;      //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//★流れる文字の影指定をCSS形式で記述。白いボカシ用。好みで変更可。ただし指定するとPC全体が遅くなる。不要なら var ts=""; で
var ts="text-shadow: 2px 2px 5px #fff,-2px 2px 5px #fff,2px -2px 5px #fff,-2px -2px 5px #fff;";

// *************************** 入力事項ここまで **************************
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
//  共通変数・配列の設定
var off_w, off_h, doc_x, doc_y;
var xza=[], yza=[];
var lenC=clrs.length, lenR=rota.length, clr=[], opa=[], sz=[];//追加
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="<span id='tx"+i+"' style='transform:rotate("+rrd+"deg);position:absolute; "+ts+"'>"+ugoku[Gy[i]][Gp[i]]+"</span>";
document.write(sss);

sz[i]=Math.floor(Math.random()*(maxSize-minSize)+minSize);//追加
clr[i]=clrs[Math.floor(Math.random()*lenC)];//追加
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
var rrd=rota[Math.floor(Math.random()*lenR)];//追加

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]-(sz[i]/2); }//■-(sz[i]/2)追加
if(disp_h[i]===0){ disp_h[i]=doc_y-marg_t[i]-(sz[i]/2); }//■-(sz[i]/2)追加
primX(i); primY(i);
xza[i]=marg_l[i]+Math.random()*(disp_w[i]-sz[i]);
yza[i]=marg_t[i]+Math.random()*(disp_h[i]-sz[i]);
if(ingN==(ugoku.length-1)){ ingN=0 } else{ ingN+=1 } }

// メインルーチン
function Zahyo(){ brSize();
for(i=0; i<no; ++i){
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]-sz[i]){ hen=0;
   stx[i]=-stx[i]; xza[i]=marg_l[i]+disp_w[i]-sz[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]-sz[i]){ hen=2;
   sty[i]=-sty[i]; yza[i]=marg_t[i]+disp_h[i]-sz[i]; kirikae(); }   //下辺
 if(yza[i]<marg_t[i]){ hen=3;
   sty[i]=-sty[i]; yza[i]=marg_t[i]; kirikae(); }                   //上辺
var ob=$("tx"+i).style;
ob.left= off_w+xza[i]+"px"; ob.top =off_h+yza[i]+"px";
ob.color=clr[i]; ob.opacity=opa[i];　ob.fontSize=sz[i]+"px"; ob.zIndex=inZ;//追加
}
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){
sz[i]=Math.floor(Math.random()*(maxSize-minSize)+minSize);//追加
disp_w[i]=doc_x-sz[i]*1.5;//1.5は範囲からのはみ出し防止用
disp_h[i]=doc_y-sz[i]*1.5;//1.5は範囲からのはみ出し防止用
}

// 文字を切り替える
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++){ $("tx"+k).style.visibility=visi; }
} 
var tx_bh=sz[i], tx_bw=sz[i];
if(hen===0){ xza[i]+=tx_bw-sz[i]; }
if(hen===2){ yza[i]+=tx_bh-sz[i]; } }
Zahyo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

ぱーぷりん２■範囲個別■ 文字が踊る UP日時 : 2020/05/07

　ぱーぷりん２■範囲個別■　文字が踊る　　　　UP日時 : 2020/05/07