Snowmaker１■文字B■　雪が降る

●2016/06/01：即時関数で囲んで、グローバル変数を消しました。
少し横揺れしながら文字フォントの雪が降るJavaScriptです。
雪の降る領域を、全面、左側、中央、右側　に指定することができます。見本は全面指定です。

前回掲載分は削除し、新しく＜hyper＞gURLで見つけたJavaScriptを改造しました。
実は前回掲載分はソースの中に、「Snow Fall 1 - no images - Java Script　Visit http://rainbow.arch.scriptmania.com/scripts/」とあったのです。
しかし、ソースの中に「 CREDITS:　Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.」と記述された「Peter Gehrig」の原本を見つけました。
当サイトでは「Snow Fall」の名でいろいろ改造していたので驚きましたが、改めて「Snowmaker」という名に修正しました。

原本はこちらから。
原本をHTML5対応にして簡略化、そして雪が文章の上に降るか、下に隠れるかを選択できるようにしました。

■透過の文字種類複数の文字が降るJavaScriptはこちら→　Snowmaker２■文字D■　透過の複数の星が降る
■透過の文字種類複数の文字が上るJavaScriptはこちら→　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１■文字B■　雪が降る</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{ 
background:url(lfp1b.jpg) #000 no-repeat;/*★背景画像指定。背景色黒色。繰り返し無し*/
background-size:100% auto;/*★画面横幅一杯の指定*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=================================================================================
文字の雪が降る　HTML5対応へ　 ★2016/06/01 　　
// 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 (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★雪の色。増減可能。Set the colors for the snow. Add as many colors as you like
var snowcolor=["#aac","#ddf","#ccd","#ffd","#fff","#fdf"];

var snowf="●";  //★雪用の文字指定。Set the letter that creates your snowflake (recommended:●)
var Zx=-1;       //★文章の上に雪が流れるか？　上に流れる：1   下に隠れる：-1
var n=30;　      //★雪の数30から40で。 Set the number of snowflakes (more than 30 - 40 not recommended)
var smax=30;     //★雪の最大サイズ。Set the maximal-size of your snowflaxes
var smin=10;     //★雪の最小サイズ。クロムとオペラは10px以下は10px表示 Set the minimal-size of your snowflaxes
var sinkspd=1.5; //★速度。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

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowzone=1; //★雪の降る場所を指定できます。1は全面　2は左側　3は中央　4は右側

//指定ここまで　 Do not edit below this line----------------------------------------------
var i=0;
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].posy=rand(2*h-h);
		if (snowzone===1) {snow[i].posx=rand(w)}
		if (snowzone===2) {snow[i].posx=rand(w/2)}
		if (snowzone===3) {snow[i].posx=rand(w/2)+w/4}
		if (snowzone===4) {snow[i].posx=rand(w/2)+w/2}
		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){
                if (snowzone===1) {snow[i].posx=rand(w)}
		if (snowzone===2) {snow[i].posx=rand(w/2)}
		if (snowzone===3) {snow[i].posx=rand(w/2)+w/4}
		if (snowzone===4) {snow[i].posx=rand(w/2)+w/2}
                snow[i].posy=0;
                }
	}
	setTimeout(movesnow,50);
}
for (i=0;i<=n;i++) {document.write("<span id='s"+i+"'>"+snowf+"</span>");}
initsnow();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

Snowmaker１■文字B■ 雪が降る UP日時 : 2016/06/01

　Snowmaker１■文字B■　雪が降る　　　　UP日時 : 2016/06/01