文字が降る上る７■透過の蛍が上る -Gizensha-

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

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

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

■複数の文字が降るJavaScriptはこちら→　降る上る６■文字D■複数の透過の花が降る -Gizensha-
■複数の文字が上るJavaScriptはこちら→　降る上る８■文字D■複数の透過の泡が上る -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(sk1.jpg) no-repeat #000;/*★背景画像指定。繰り返し無し。背景色黒色*/
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="#ff6"; //★流れる文字の色
var snow=30;　　//★原本30。流れる文字の数
var Zx=-1;      //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var fsz=6;      //★原本7。流れる文字の大きさ。数値を小さくすると全体的に小さ目になり、大きくすると全体的に大き目になる

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;
this.e.style.fontSize = this.z * fsz + 'px';//■原本7をfszへ
this.e.style.opacity = op / 100;
}
var ne = document.createElement('div');
ne.appendChild( document.createTextNode(sf));
ne.style.color =col;
ne.style.position = 'fixed';/*■原本はabsolute*/
ne.style.zIndex=Zx;//■追加
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>

降る上る７■文字B■ 透過の蛍が上る -Gizensha- 最終修正日 : 2016/03/09

　降る上る７■文字B■　透過の蛍が上る -Gizensha-　　　　最終修正日 : 2016/03/09