文字が降る上る８■複数の透過の泡が上る -Gizensha-

●2016/03/09：即時関数で囲んで、グローバル変数を消しました。

■１個の文字が降るJavaScriptはこちら→　降る上る５■文字B■透過の雪が降る -Gizensha-

上記のJavaScriptを改造しました。
文字の流れる向きを逆にして、複数色指定の複数種類の文字の泡が上る JavaScriptです。
複雑な横揺れでランダムの透過がかかっているので、とてもきれいです。
原本は教えて！gooの「Gizenshaさんの回答２」から。

原本を改造して作成した改造元から、さらに追加した改造点は、まず色と文字の複数指定です。
それから透過指定の数値指定です。
さらに、CSSのtext-shadowの指定（文字に影やボカシを付ける）も可能です。
ただしこの指定を付けると、処理速度が低下します。

■複数の文字が降るJavaScriptはこちら→　降る上る６■文字D■複数の透過の花が降る -Gizensha-
■１個の文字が上るJavaScriptはこちら→　降る上る７■文字B■透過の蛍が上る -Gizensha-

<!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>文字が降る上る８■複数の透過の泡が上る -Gizensha-</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{
background:url(fwa2.jpg) no-repeat #ffc;/*★背景画像指定。繰り返し無し。背景色薄黄色*/
background-position:center 100px;/*★左右は中央位置、上から100px位置指定*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=======================================================
複数の透過の泡が上る(Gizensha)：By「教えて！goo」http://oshiete.goo.ne.jp/qa/4555130.html（回答者 Gizensha 回答２）
★2016/03/09 降るを上るへ変更、複数指定、位置指定等修正
========================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★流れる文字指定。文字を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var sf=["●","○","●"];
//★文字の色指定。色を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var col=["#fcc","#ec6","#6ab","#bd8"];
var snow =20;　　 //★原本30。流れる文字の数
var Zx=-1;        //★文章の上に文字が流れるか？　上に流れる：1   下に隠れる：-1
var fsz=8;        //★原本7。流れる文字の大きさ。数値を小さくすると全体的に小さ目になり、大きくすると全体的に大き目になります
var maxOp=0.8;    //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.4;   //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//★流れる文字を装飾するCSSのtext-shadowの指定。ただし指定するとPC全体が遅くなります。不要なら var ts=""; で
var ts="3px 3px 4px #c80";

var i,sin =[];
var maxf=5*fsz;//■追加
for( i=0; i<361; i++) sin[i]=Math.sin(i*3.14159/180);
for( i=0; i<snow; i++) new bringSnow();
function bringSnow(){
this.go = function(){
var w=window.innerWidth+maxf;
var h=window.innerHeight+maxf;
this.y -= this.z/2 +2;　　　/*★下→上にするため、+=を-=へ変更*/
this.p+=2;
if( this.y < -maxf) this.init();/*■下→上にするため変更*/
this.e.style.top =-maxf+this.y + (sin[this.p%360]*6*this.z|0) +'px';//■-maxf+追加
this.e.style.left =-maxf+this.x + (sin[this.p*2%360]*6*this.z|0) +'px';//■-maxf+追加
}
this.init = function(n){
var w=window.innerWidth+maxf;//■追加
var h=window.innerHeight+maxf;//■追加
this.p =0;
this.y = Math.random() * h|0;/*★止まるので右記削除 * ( n != undefined );*/
this.x = Math.random() * w |0;//■60を削除
this.z = (Math.random() * 5 |0) + 1;
//var op = (Math.random() * 80 |0) + 21;
var op = Math.random()*(maxOp-miniOp)+miniOp;//■修正
this.e.style.fontSize = this.z * fsz + 'px';//■原本7をfszへ
this.e.style.opacity = op;//■修正
}
var ne = document.createElement('div');
var rdsf=sf[Math.floor(Math.random()*sf.length)];//■追加
var rdcol=col[Math.floor(Math.random()*col.length)];//■追加
ne.appendChild( document.createTextNode(rdsf));
ne.style.color =rdcol;
ne.style.position = 'fixed';/*■原本はabsolute*/
ne.style.zIndex=Zx;//■追加
ne.style.textShadow=ts;//■追加
this.e = document.body.appendChild( ne );
this.init(1);
setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), (Math.random() * 30 |0) +16)
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

降る上る８■文字D■ 複数の透過の泡が上る -Gizensha- UP日時 : 2016/03/09

　降る上る８■文字D■　複数の透過の泡が上る -Gizensha-　　　　UP日時 : 2016/03/09