ぱーぷりん２■全面個別■　文字が踊る

●2017/07/20：即時関数で囲んで、グローバル変数を消しました。

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

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

この見本は、文字を個別に指定して、動作の指定と表示位置指定ができます。
見本では、丸型の文字は上端表示、星の文字は上端以外の下表示にしてあります。
見本では指定していませんが、文字の複数表示を、途中で１個表示に変更することもできます。
さらに画面スクロール時に、画像もスクロールするかしないかの選択もできます。
見本は「var srl=1」で「スクロールする」指定なので、bodyの背景画像を固定位置指定（fixed）にしてます。お好みで指定して下さい。

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

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

<!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(pt58d.jpg) repeat-x #07a fixed;}/*背景上端横並び固定位置指定。背景画像は横770px縦300px。不要なら削除*/
--></style>

</head>
<body>

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

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

// ======= 入力２：動きの調整
var no = 50 ; // 画面に同時に出す画像数を入力
var hsw=-1 ;  // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）。１個表示されるのは、ugoku[0]で指定した画像
var srl=1 ;   // 画像を同時にスクロールさせるか？  （ yes=1 , no=-1 ）
var inZ=-1;   //★画像や文章の上に浮くなら 1 。下に隠れるなら -1。追加指定
var chg=50 ;  // 一秒当たりの描画の切替え回数（初期値 100）。小さいほど動きが速い

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

//★文字の色指定。増減可能。色を順番に"●",と区切って並べる。ランダムなので上記文字数より多くても少なくても可。最後の ] の前には ,(カンマ) 無し
var clrs=["#fff","#ff0","aqua","pink","#ff5"]; 
var rota=[45,-30,0]; //★文字の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で
var maxSize=100;     //★文字の最大サイズ
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:1px 1px #333,-1px -1px #333,-1px 1px #333,1px -1px #333;";
// *************************** 入力事項ここまで **************************

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]; }//■-sz[i]追加
if(disp_h[i]===0){ disp_h[i]=doc_y-marg_t[i]-sz[i]; }//■-sz[i]追加
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=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++){ $("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日時 : 2017/07/20

　ぱーぷりん２■全面個別■　文字が踊る　　　　UP日時 : 2017/07/20