ふわふわ■中心点２５　ブラックホール遠のく　-ぱーぷりんの溜まり場-

<!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("usi1.gif") #000;}/*★星空の背景画像*/

/*★グラデーションの大きな星の作成*/
.hosi{
position:relative;/*★z-index指定時は、位置指定は必ずposition:●●(何でも使いやすい指定で);が必須。指定しないなら削除しても可*/
background: radial-gradient(#ff0 1%, #824 5%, #226 25%, #000 50%);/*★黄色、赤紫、紺、黒のグラデ*/
width:300px;
height:300px;
margin-top:150px;
margin-left:200px;
border-radius:50%;/*★角丸指定。円形にする*/
}
--></style>
<!--★ここまで円形グラデーションの背景指定。不要なら削除-->

</head>
<body>

<!--★ここからコピー。下１行は、円形グラデーション指定分。不要なら削除-->
<div class="hosi"></div>

<script type="text/javascript"><!--
/*=====================================================================================
「■ 遠ざかる（近づく）画像」宇宙の墓場　ブラックホール」star  ver1.10  
By　 http://kyoei.arrow.jp/templ/move2/star05.html（ぱーぷりんの溜まり場）
本サイト　http://kyoei.arrow.jp/jissai.html(京栄一級建築士事務所のテンプレートから)
★ブラウザIEとFirefoxのみ動作を、他ブラウザ対応、HTML5対応に改造。　　2017/07/21
=======================================================================================*/
(function(){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
ugoku=new Array();   // この行は触らないで・・

// *******************************  入力事項  **********************************
// ======= 入力１：画像の種類および動きの調整（0から順に必要な種類数だけ入力）
// １番目で画像の速さの最大値を入力。 正数で遠ざかり、負数で近づく （目安値 10）
// ２番目で円の回転速さの最大値を入力 +:時計廻 -:反時計廻 0:無回転 （目安値 10）
// ３番目で出したい画像を、アドレスを含むファイル名で指定
ugoku[0]=[ 30, -10, "usi2.gif"];
ugoku[1]=[ 35, -15, "usi3.gif"];

var imgw=48;//使用画像の内の最大横幅
var imgh=47;//使用画像の内の最大縦幅

// ======= 入力２：全体表示の調整（ [ ]内は、近づく場合）
var Xo= 350 ;  // 回転中心の、画面左端からの距離（ピクセル）
var Yo= 350 ;  // 回転中心の、画面上端からの距離（ピクセル）
var lr=  10 ;  // 画像の大きさで、大きいほど全体的に大きくなる  （目安値 10）
var pd=  20 ;  // 画像が消える[発生する]遠さ。大きいほど遠い    （目安値 10）
var vp=  10 ;  // 画像の発生する[消える]近さ。小きいほど近い    （目安値 10）
var oar= 30 ;  // 画像の発生する範囲。 小きいほど中心に密集する （目安値 10）
// ======= 入力３：補助入力事項
var no=  15 ;  // 画面に同時に出す画像数を入力
var srl= -1 ;  // 画像も同時にスクロールさせるか？        （ yes=1 , no=-1 ）
var chg=100 ;  //★一秒当たりの描画の切替え回数（初期値 100）。数値を小さくすると速度が速くなる
var inZ= 1  ;  //★画像や文章の上に浮くなら 1 。下に隠れるなら -1。追加指定
// ***************************** 入力事項ここまで ******************************

function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
// ----- 共通変数・配列の設定 -----
var docW, docH, offW, offH;
var v=[], z=[], sp=[], rd=[], dx=[], dy=[], r=[], sita=[];

// ----- 開始値の設定 -----
var j=0, i=0; vp=vp/100; lr=lr/5; brSize();
for(i=0; i<no; i++){
var sss="<img src="+ugoku[j][2]+" id='img"+i+"' style='position:absolute; z-index:"+inZ+";'>";
document.write(sss);
dx[i]=imgw; dy[i]=imgh;
sp[i]=ugoku[j][0]; rd[i]=ugoku[j][1];
prim(i);
if(j==(ugoku.length-1)){j=0} else{j+=1} }

// ----- メインの設定 -----
function star(){
for(i=0; i<no; i++){
   if( z[i]>pd || z[i]<vp ){ brSize(); prim(i) }
z[i]+=v[i]; sita[i]+=rd[i]/50;
sx=r[i]*Math.cos(sita[i])/z[i]+Xo;
sy=r[i]*Math.sin(sita[i])/z[i]+Yo;
sdx=dx[i]/z[i];  sdy=dy[i]/z[i];

while(sx<0 || sy<0 || (sx+sdx*lr)>docW || (sy+sdy*lr)>docH){
     if ( z[i]<vp ){ brSize(); prim(i) }
z[i]+=v[i]; sita[i]+=rd[i]/50;
sx=r[i]*Math.cos(sita[i])/z[i]+Xo;
sy=r[i]*Math.sin(sita[i])/z[i]+Yo;
sdx=dx[i]/z[i];  sdy=dy[i]/z[i] }
Disp(i,sx,sy) }
setTimeout(star,chg);}

// ----- 画像を発生する -----
function prim(i){
 if (sp[i]>0) { z[i]=vp } else{ z[i]=pd };
v[i]=[0.6*Math.random()+0.4]*sp[i]/15;
ro=Math.sqrt(Math.pow(docW,2)+Math.pow(docH,2))/2;
 if (sp[i]>0) { r[i]=ro*Math.random()*oar/4 }
       else{ r[i]=ro*Math.random()*oar*5/pd };
sita[i]=2*Math.PI*Math.random() }

// ----- ブラウザのサイズ -----
function brSize(){
docW=window.innerWidth-18; docH=window.innerHeight-18;
offW=window.pageXOffset; offH=window.pageYOffset;
if(srl < 0){ offW=0; offH=0 }}

// ----- 画像を移動させる -----
function Disp(i,sx,sy){
var ob=$("img"+i).style;
ob.width =lr/z[i]*dx[i]+"px"; ob.height=lr/z[i]*dy[i]+"px"; ob.left=sx+offW+"px"; ob.top =sy+offH+"px";
}
star();
})();//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
中心点２５■ブラックホール遠のく -ぱーぷりんの溜まり場- 最終修正日 : 2017/07/21

　中心点２５■ブラックホール遠のく　-ぱーぷりんの溜まり場-　　　　最終修正日 : 2017/07/21
