Snowmaker４■文字D■　枠の中で透過の複数の星が降る

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

■文字種類１個の文字が降るJavaScriptはこちら→　Snowmaker１■文字B■　雪が降る

上記のJavaScriptを改造しました。
少し横揺れしながら文字フォントの星が降るJavaScriptですが、改造元にあった「降る領域選択を削除」し、範囲指定を付けました。
枠の中で、複数種類指定とランダムの透過指定の文字が降ります。
さらに、CSSのtext-shadowの指定（文字に影やボカシを付ける）も可能です。見本は星に輪郭線を付けてあります。
ただしこのtext-shadow指定を付けると、PCの処理速度が低下します。

範囲指定には何度も挑戦しつつ、いつも玉砕していましたが、今回こそ大丈夫！……なんじゃないかな、たぶん（笑）。
１．範囲指定の条件は、第一は枠の中にきちんとおさまること　→　枠線や、角丸の部分に、はみ出して表示されないこと。
２．流れる文字が大きな文字でも全体が唐突に表示されるのではなく、徐々に文字の端から表示されること。
３．好みの位置に自由に範囲指定の枠を設定できること。
４．指定が複雑で無く、簡単なこと。
たぶん今回は、上記のすべての条件をクリアできたと思います。

<!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>Snowmaker４■文字D■　枠の中で透過の複数の星が降る</title>

<!--★ここからコピー-->
<style type="text/css"><!--
/*★範囲指定用。#zonは必須*/
#zon{
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
width:327px;/*★必須。範囲指定の横幅。今回は背景の月画像横幅*/
height:429px;/*★必須。範囲指定の縦幅。今回は背景の月画像縦幅*/
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:50px auto;/*★上下、左右の位置指定*/
background:url(fwa4.gif) #acf;/*★背景画像に背景透過の月画像指定。背景色水色。背景色のみ指定でも可*/
border:solid 3px #333;/*★枠線指定。黒色。お好みで*/
border-radius:50% 50px 30px 50px;/*★左上  右上   右下  左下の角丸指定(時計回り)。お好みで*/
box-shadow: 5px 5px 20px #333 inset;/*★内側の影指定。お好みで*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記１行が範囲指定の位置。id="zon"は必須。-->
<div id="zon"></div>

<script type="text/javascript"><!--
/*=================================================================================
枠の中で文字の雪が降る　HTML5対応。領域指定削除。範囲指定、文字種類複数、透過、text-shadow追加。　 ★2016/06/05 　　
// CREDITS:　Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by Hypergurl（掲載サイト：http://www.hypergurl.com/snowmaker.html）
// Permission given to use the script provided that this notice remains as is.
==================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★流れる文字指定。文字を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var snowf=["★","+","・"];

//★流れる文字の色。増減可能。Set the colors for the snow. Add as many colors as you like
var snowcolor=["#ff0","#fff","#fcc","#ff0"];

var n=30;　      //★文字の表示数30から40で。 Set the number of snowflakes (more than 30 - 40 not recommended)
var smax=50;     //★文字の最大サイズ。Set the maximal-size of your snowflaxes
var smin=10;     //★文字の最小サイズ。クロムとオペラは10px以下は10px表示 Set the minimal-size of your snowflaxes
var sinkspd=0.6; //★速度。0.3～2の範囲で指定。大きいほど速い Set the speed of sinking (recommended values range from 0.3 to 2)
var ftype=["Arial","Times","Comic Sans MS"];//★文字書体。好みで。Set the fonts, that create the snowflakes. Add as many fonts as you like

var maxOp=1;     //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.8;  //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//★流れる文字の影指定をCSS形式で記述。黒の輪郭線指定。好みで変更可。ただし指定するとPC全体が遅くなる。不要なら var ts=""; で
var ts="text-shadow:1px 1px #333,-1px -1px #333,-1px 1px #333,1px -1px #333;";

//指定ここまで　 Do not edit below this line----------------------------------------------
var i=0; 
var len=snowf.length, opa=[];//追加
var snow=[], x_mv=[], crds=[], lftrght=[];
var zonw=zon.clientWidth, zonh=zon.clientHeight;//範囲指定に修正
var w=zonw+smax, h=zonh+smax;//文字表示幅追加
function rand(range) { var r=Math.floor(range*Math.random()); return r;}
function initsnow() {
	for (i=0;i<=n;i++) {
	crds[i]=0;                      
    	lftrght[i]=Math.random()*15;         
    	x_mv[i]=0.03+Math.random()/10;
		snow[i]=document.getElementById("s"+i);
		snow[i].style.position='absolute';//■修正
		snow[i].style.fontFamily=ftype[rand(ftype.length)];
		snow[i].size=rand(smax-smin)+smin;
		snow[i].style.fontSize=snow[i].size+'px';
		snow[i].style.color=snowcolor[rand(snowcolor.length)];
		snow[i].style.opacity=rand(maxOp-miniOp)+miniOp;//追加
		snow[i].posy=rand(2*h-h);
                snow[i].posx=rand(w);
		snow[i].sink=sinkspd*snow[i].size/5;
		snow[i].style.left=-smax+snow[i].posx+'px';
		snow[i].style.top=-smax+snow[i].posy+'px';
	}
	movesnow();
}
function movesnow() {
	for (i=0;i<=n;i++) {
		crds[i] += x_mv[i];
		snow[i].posy+=snow[i].sink;
		snow[i].style.left=-smax+snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
		snow[i].style.top=-smax+snow[i].posy+'px';
                if (snow[i].posy>=h){ snow[i].posx=rand(w); snow[i].posy=0;}
	}
	setTimeout(movesnow,50);
}
var sss='<div style="position:absolute;width:'+zonw+'px;height:'+zonh+'px;">';
for (i=0;i<=n;i++) {
sss +="<span id='s"+i+"' style='"+ts+"'>"+snowf[i%len]+"</span>";
}
sss +='</div>';
document.getElementById("zon").innerHTML=sss;//■範囲指定用追加
initsnow();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

Snowmaker４■文字D■ 枠の中で透過の複数の星が降る UP日時 : 2016/06/05

　Snowmaker４■文字D■　枠の中で透過の複数の星が降る　　　　UP日時 : 2016/06/05