Snowmaker２■文字D■　透過の複数の星が降る

<!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(ir13.png) #acf no-repeat 50% 100px;}/*★背景画像指定。背景色水色。繰り返し無し。左右中央、上から100px位置*/
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=================================================================================
文字の雪が降る　HTML5対応。領域指定削除。文字種類複数、透過、text-shadow追加。　 ★2016/06/02 　　
// 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","#fa5","#fcf","#ff0"];

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: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 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>=h){ snow[i].posx=rand(w); snow[i].posy=0;}
	}
	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/02

　Snowmaker２■文字D■　透過の複数の星が降る　　　　UP日時 : 2016/06/02
