文字が降る上る５■透過の雪が降る -Gizensha-

●2016/03/09：即時関数で囲んで、グローバル変数を消しました。
１色指定の１種類の文字の雪が降る JavaScriptです。
複雑な横揺れでランダムの透過がかかっているので、とてもきれいです。
原本は教えて！gooの「Gizenshaさんの回答２」から。

原本の降る文字の位置指定を「 position="absolute";」から「 position="fixed";」に変更することで、縦画面がスクロールバー表示が必要なほど長くなっても、文字が画面の下まで降るように修正しました。
そして雪用の文字指定や色指定等を、指定しやすくしました。
さらに、文章の上に「降る文字」が流れるか、文章の下に隠れるか（←この見本では隠れる）の指定も選択できます。

■複数の文字が降るJavaScriptはこちら→　降る上る６■文字D■複数の透過の花が降る -Gizensha-
■１個の文字が上るJavaScriptはこちら→　降る上る７■文字B■透過の蛍が上る -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(so1.jpg) no-repeat fixed top right #000;/*★背景画像指定。繰り返し無し。右上固定。背景色黒色*/
background-size:50% auto;/*★背景画像横幅50%指定。縦幅自動。見本の画像の実寸は横240px縦360px*/
}
--></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="#fff"; //★流れる文字の色
var snow =30;　 //★原本30。流れる文字の数
var Zx=-1;      //★文章の上に文字が流れるか？　上に流れる：1   下に隠れる：-1
var fsz=7;      //★原本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 > h) this.init();/*■原本h-60*/
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 * ( n != undefined ) |0;
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