Kurt Grigg１■激しい泡が上る

●2016/03/04：即時関数で囲んで、グローバル変数を消しました。
激しい泡が上るJavaScriptです。
原本を最新ブラウザ対応、HTML5対応に改造しました。
さらに、文章の上に泡が上るか文章の下に隠れるか、の指定も可能です。見本は文章の下に隠れる指定です。
原本のJavaScript作成は、「kurt.grigg」です。
残念ながら原本サイトは閉鎖済みですが、保管サイトからの原本はこちらから。
この原本は、ブラウザIE(とネットスケープ)専用で、他のブラウザでは動作不可で、HTML5でも使用できません。

■2016/03/06：スクロール指定選択を削除して、position="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>Kurt Grigg１■激しい泡が上る</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{ 
background:url(lfp4.jpg) #147 no-repeat;/*★背景画像指定。背景色紺色。繰り返し無し*/
background-size:100% auto;/*★画面横幅一杯の指定*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*==================================================================
泡が上がる：bubbles Script by kurt.grigg@virgin.net
JS保管サイト：http://www2.tky.3web.ne.jp/~ogura1/
★最新ブラウザ対応とHTML5対応を追加。位置指定を修正。　2016/03/06
=====================================================================*/
(function (){ var i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var ga="ball.png";    //★画像指定
var Zx=-1;            //★文章の上に泡が流れるか？　上に流れる：1   下に隠れる：-1
var maxImg=25;        //★泡の最大横幅指定。画像の実寸とは無関係です。最小横幅は3px指定済み。原本の最大横幅指定25
var Amount=10;        //★原本10。表示画数。 
var spd=10;           //★原本10。小さいほど速い。速度が違うと残像数が変わり、見え方が違う

var Ypos=[],Xpos=[],Speed=[],rate=[],grow=[],Step=[],Cstep=[];
var WinHeight=window.innerHeight, WinWidth=window.innerWidth-maxImg;
for (i=0; i<Amount; i++){
document.write('<img src="'+ga+'"id="si'+i+'" style="position:fixed; z-index:'+Zx+';">');
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= 10+Math.random()*5;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
grow[i]=10;
rate[i]=Math.random()*0.5+0.1;
}
function bubbles(){
for (i=0; i<Amount; i++){
var sy=Speed[i]*Math.sin(270*Math.PI/180);
var sx=Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy; Xpos[i]+=sx; 
if (Ypos[i]<-50){
Ypos[i]=WinHeight;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=10+Math.random()*5; grow[i]=3;
}
var layer=document.getElementById("si"+i).style;
layer.left=Xpos[i]+"px"; layer.top=Ypos[i]+"px"; 
layer.width=grow[i]+"px"; 
layer.height=grow[i]+"px";
grow[i]+=rate[i]; Cstep[i]+=Step[i];
if (grow[i]>maxImg-1) grow[i]=maxImg;
}
setTimeout(bubbles,spd);
}
bubbles();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

Kurt Grigg１■画像B■ 激しい泡が上る 最終修正日 : 2016/03/06

　Kurt Grigg１■画像B■　激しい泡が上る　　　　　最終修正日 : 2016/03/06