ぱーぷりん２■範囲一括■　文字が踊る

<!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:10px auto 50px;/*★位置指定（上、左右、下）。位置指定自体はお好みで*/
background:url(an31.jpg) ;/*妖精の背景画像。サイズは横1000px縦200px*/
width:1000px;/*★必須。範囲の横幅指定。妖精画像の横幅*/
height:200px;/*★必須。範囲の縦幅指定。妖精画像の縦幅*/
border-radius:50px;/*★角丸指定。お好みで。あまり大きくすると浮遊画像が範囲からはみだす*/
}

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

</head>
<body>

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

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

//★浮遊する文字指定。増減可能。&hearts;はハート。文字を順番に"●",と区切って、いくつでも並べる。最後の)の前には,(カンマ)無し
var ugoku=["●","○","&hearts;"];

//★文字の色指定。増減可能。色を順番に"●",と区切って並べる。ランダムなので上記文字数より多くても少なくても可。最後の ] の前には ,(カンマ) 無し
var clrs=["#ccc","#ff0","aqua","pink","#5f5"]; 

var rota=[45,-30,0];//★文字の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で

var maxSize=50;   //★文字の最大サイズ
var minSize=12;   //★文字の最小サイズ。クロムとオペラは10px以下は10px表示
var maxOp=0.8;    //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.3;   //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var inZ=1;        //★浮遊する文字と他の画像(文章)同士の重なり具合。1 以上を指定。他の画像(文章)との重なり具合で変更する
var no=40 ;  　   //★画面に同時に出す画像数を入力    
var hsw=1 ;  　   //★途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）
var chg=50 ;      //★一秒当たりの描画の切替え回数（初期値 100）。数値を小さくすると速度が速くなる

//★流れる文字の影指定を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=[], img_w=[], img_h=[], stx=[], sty=[], xflg=[], yflg=[], disp_w=[], disp_h=[];
var len=ugoku.length, lenC=clrs.length, lenR=rota.length, opa=[], sz=[], clr=[];//追加

//  初期値の設定
var i=0, dpsw=1, hen; brSize();
for(i=0; i<no; i++){
var sss="<span id='tx"+i+"' style='transform:rotate("+rrd+"deg); "+ts+"'>"+ugoku[i%len]+"</span>";
document.write(sss);
Size(i); primX(i); primY(i);
xza[i]=Math.random()*disp_w[i];
yza[i]=Math.random()*disp_h[i];
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
clr[i]=clrs[Math.floor(Math.random()*lenC)];//追加
var rrd=rota[Math.floor(Math.random()*lenR)];//追加
}

// メインルーチン
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]>disp_w[i]){ hen=0;stx[i]=-stx[i]; xza[i]=disp_w[i]; kirikae(); }//右辺
if( xza[i]<0){ hen=1;stx[i]=-stx[i]; xza[i]=0; kirikae(); }               //左辺
if(yza[i]>disp_h[i]){ hen=2;sty[i]=-sty[i]; yza[i]=disp_h[i]; kirikae(); }//下辺
if(yza[i]<0){ hen=3;sty[i]=-sty[i]; yza[i]=0; 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.zIndex=inZ; ob.opacity=opa[i]; ob.fontSize=sz[i]+"px"; ob.position="absolute";
}
setTimeout(Zahyo,chg); }

// 初期データ発生
function primX(i){
stx[i]=(1-Math.random()*2)*50/6;// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）50へ
xflg[i]=Math.floor(1+Math.random()*60) }// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）60へ

function primY(i){
sty[i]=(1-Math.random()*2)*50/6;// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）50へ
yflg[i]=Math.floor(1+Math.random()*60) }// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）60へ

// ブラウザ等のサイズを調べる
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(var 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
