Snowmaker３■文字D■　透過の複数のハートが上る

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

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

上記のJavaScriptを改造しました。
少し横揺れしながら文字フォントのハートが上る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"><!--
body{ background:url(fp20.jpg);}/*★背景画像指定。不要なら削除*/
--></style>

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=================================================================================
文字のハートが上る　HTML5対応。降るを上るへ変更。領域指定削除。文字種類複数、透過、text-shadow追加。　 ★2016/06/03 　　
// 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 (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

//★流れる文字の色。増減可能。Set the colors for the snow. Add as many colors as you like
var snowcolor=["#f00","#f64","#f06","#f0f","#faf","#fd5"];

var Zx=-1;       //★文章の上に文字が流れるか？　上に流れる：1   下に隠れる：-1
var n=30;　      //★文字の表示数30から40で。 Set the number of snowflakes (more than 30 - 40 not recommended)
var smax=40;     //★文字の最大サイズ。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.7;  //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//★流れる文字の影指定をCSS形式で記述。白いボカシ用。好みで変更可。ただし指定するとPC全体が遅くなる。不要なら var ts=""; で
var ts="text-shadow: 2px 2px 5px #fff,-2px 2px 5px #fff,2px -2px 5px #fff,-2px -2px 5px #fff;";

//指定ここまで　 Do not edit below this line----------------------------------------------
var i=0; 
var len=snowf.length, opa=[];//追加
var snow=[], x_mv=[], crds=[], lftrght=[];
var h=window.innerHeight+smax;//修正
var w=window.innerWidth+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='fixed';//修正
                snow[i].style.zIndex=Zx;//追加
		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<=0){snow[i].posx=rand(w);snow[i].posy=h;}//★２ヶ所変更
	}
	setTimeout(movesnow,50);
}
for (i=0;i<=n;i++) {document.write("<span id='s"+i+"' style='"+ts+"'>"+snowf[i%len]+"</span>");}
initsnow();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

Snowmaker３■文字D■ 透過の複数のハートが上る UP日時 : 2016/06/03

　Snowmaker３■文字D■　透過の複数のハートが上る　　　　UP日時 : 2016/06/03