画像が降る上る２３　降る画像変化(四季と数字指定)

■このページは『戻る』ボタンは効かないので、このページのタグを閉じて下さい。

原本は、春夏秋冬の四季によって、降る画像が自動的に変化するJavaScript。
降る画像が変わるだけではなく、降り方も変化します。横揺れが大きかったり、緩急の変化が大きかったり。

画像種類、降る表示数、透過度、降り方も、季節ごとに指定可能です。
最初に設定しておけば、何もしなくても季節ごとに自動で変化するという、便利なJavaScriptです。

画像を複数指定、HTML5対応、簡単な透過指定付きに、原本を改造してあります。
原本はこちらのサイトから。
今回は四季の自動変化とは別に、数字指定で降る画像が変化する別バージョンのJavaScriptも、下記に並べて表示しました。
お好きな方をご使用下さい。

画像の揺れ方の変化を見てほしいので、『春』『夏』『秋』『冬』のボタンクリックで四つのバージョンが見られます。
数字指定の方のJavaScriptで、前もって４枚のhtmlを作成してから、ボタン選択のインラインフレームで呼び出しています。このボタン選択のインラインフレームを作成するJavaScriptは、こちらから。

◆四季自動変化・全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>画像が降る上る２３A　降る画像変化(四季自動)</title>

<style type="text/css">
<!--
body { 
/*★揺れ防止*/
width:100%;height:100%;}
-->
</style>

</head>
<body bgcolor="#0f6c89">


<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript">
<!--
/*=======================================================================================
降る画像の変化(四季自動変化)　Made In Naru 2001/11/3　　　サイトhttp://naruken.cweb.tk/index.html
=============================================================================
★原本は四季によって降る画像が変化を、複数画像指定、HTML5対応、透過指定付きへ改造。2014/09/16
========================================================================================*/
/*★四季で自動変化*/
var today=new Date();
var m=today.getMonth();

//春の桜
if (2<=m && m<=4){
　　　　var SnowImg= new Array
　　　　("../sa2.png","../sa4.png","../sakura5.png","../sakura6.png");//★降る画像名。増減可能
        var opa=0.8;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=50;    	//●落下物（オブジェクト）の数
	var DownStepMax=5;  	//●落下スピードDownStepの最大値
	var DownStepMin=0.5;	//●落下スピードDownStepの最小値
	var SwingWidthMax=10; 　//●振幅SwingWidthの最大値
	var SwingWidthMin=5;  　//●振幅SwingWidtの最小値
	var Ramd=8;           　//●周期
}
//夏の雨
if (5<=m && m<=7){
　　　　var SnowImg= new Array
　　　　("../e21e22os/an1.gif","../e21e22os/an2.gif","../e21e22os/an3.gif","../e21e22os/an4.gif");//★降る画像名。増減可能
        var opa=0.6;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=25;
	var DownStepMax=4;
	var DownStepMin=4;
	var SwingWidthMax=4;
	var SwingWidthMin=1;
	var Ramd=10;
}
//秋の紅葉
if (8<=m && m<=10){
　　　　var SnowImg= new Array
　　　　("../alc.png","../blss.png","../clc.png","../dls.png");//★降る画像名。増減可能
        var opa=1;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=25;
	var DownStepMax=5;
	var DownStepMin=1;
	var SwingWidthMax=20;
	var SwingWidthMin=1;
	var Ramd=5;
}
//冬の雪
if (m==11 || m<=1){
　　　　var SnowImg= new Array
　　　　("../wbw10.png","../wbw15.png","../wbw20.png");//★降る画像名。増減可能
        var opa=0.7;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=25;
	var DownStepMax=4;
	var DownStepMin=4;
	var SwingWidthMax=4;
	var SwingWidthMin=1;
	var Ramd=10;
}

//★ここから下documentElemenをbodyに変更する以外は、さわらない
//========================================================================================
var j = 0;
var n,ImgID;
var a=new Array(FallNo);
var Pleft=new Array(FallNo);
var DownStep=new Array(FallNo);
var Pivot=new Array(FallNo);
var SwingWidth=new Array(FallNo);

//▼▼▼　画像タグ絵画と初期パラメータ設定
for (n=1;n<FallNo;n++){
	ImgTag="<img src='"+SnowImg[j]+"' id='snow"+n+"' style='position:absolute;z-index:5;opacity:"+opa+";'>";
if (j == (SnowImg.length-1)) { j = 0; } else { j += 1; }
	document.write(ImgTag);

	a[n]=Math.random()*document.documentElement.clientWidth-document.documentElement.clientWidth;
	Pivot[n]=Math.random()*(document.documentElement.clientWidth-75)+25;
	DownStep[n]=Math.random()*(DownStepMax-DownStepMin)+DownStepMin;
	SwingWidth[n]=Math.random()*(SwingWidthMax-SwingWidthMin)+SwingWidthMin;
}
setInterval("move()",50);

//▼▼▼　画像移動処理
function move(){
	for (n=1;n<FallNo;n++){
		if (document.documentElement.clientHeight+0 <= a[n]) {
			ResetParamator();
		}
		a[n]=a[n]+DownStep[n];

		Pleft[n]=Math.sin(a[n]/Ramd)*SwingWidth[n]+Pivot[n];
		ImgID="snow"+n
		document.getElementById(ImgID).style.left=Pleft[n]+"px";
		document.getElementById(ImgID).style.top=a[n]+"px";
	}
}

//▼▼▼　下まで落ちた物の落下パラメータを再設定
function ResetParamator(){     
	a[n]=-30;
	Pivot[n]=Math.random()*(document.documentElement.clientWidth-75)+25;
	DownStep[n]=Math.random()*(DownStepMax-DownStepMin)+DownStepMin;
	SwingWidth[n]=Math.random()*(SwingWidthMax-SwingWidthMin)+SwingWidthMin;
}
//-->
</script>
<!--★ここまでコピー-->

</body>
</html>

◆数字指定変化・全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>画像が降る上る２３B　降る画像変化(数字指定)</title>

<style type="text/css">
<!--
body {
/*★揺れ防止*/
width:100%;height:100%;
}
-->
</style>

</head>
<body bgcolor="#7faba9">

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript">
<!--
/*=======================================================================================
降る画像の変化　Made In Naru 2001/11/3　　　サイトhttp://naruken.cweb.tk/index.html
=============================================================================
★原本は四季によって降る画像が変化を、数字指定による変化に改造。
複数画像指定、HTML5対応、透過指定付きへ改造。2014/09/16
========================================================================================*/

/*★降るモード設定　★1=春の桜モード　2=夏の雨モード　3=秋の紅葉モード　4=冬の雪モード*/
var m=1;

//春の桜
if (m==1){
　　　　var SnowImg= new Array
　　　　("../sa2.png","../sa4.png","../sakura5.png","../sakura6.png");//★降る画像名。増減可能
        var opa=0.8;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=50;    	//●落下物（オブジェクト）の数
	var DownStepMax=5;  	//●落下スピードDownStepの最大値
	var DownStepMin=0.5;	//●落下スピードDownStepの最小値
	var SwingWidthMax=10; 　//●振幅SwingWidthの最大値
	var SwingWidthMin=5;  　//●振幅SwingWidtの最小値
	var Ramd=8;           　//●周期
}
//夏の雨
if (m==2){
　　　　var SnowImg= new Array
　　　　("../e21e22os/an1.gif","../e21e22os/an2.gif","../e21e22os/an3.gif","../e21e22os/an4.gif");//★降る画像名。増減可能
        var opa=0.6;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=25;
	var DownStepMax=4;
	var DownStepMin=4;
	var SwingWidthMax=4;
	var SwingWidthMin=1;
	var Ramd=10;
}
//秋の紅葉
if (m==3){
　　　　var SnowImg= new Array
　　　　("../alc.png","../blss.png","../clc.png","../dls.png");//★降る画像名。増減可能
        var opa=1;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=25;
	var DownStepMax=5;
	var DownStepMin=1;
	var SwingWidthMax=20;
	var SwingWidthMin=1;
	var Ramd=5;
}
//冬の雪
if (m==4){
　　　　var SnowImg= new Array
　　　　("../wbw10.png","../wbw15.png","../wbw20.png");//★降る画像名。増減可能
        var opa=0.7;//★画像透過指定。1で透過無し。0で完全透明なので、0指定はしないこと
	var FallNo=25;
	var DownStepMax=4;
	var DownStepMin=4;
	var SwingWidthMax=4;
	var SwingWidthMin=1;
	var Ramd=10;
}
//★ここから下documentElemenをbodyに変更する以外は、さわらない
//-----------------------------------------------------------------------------------
var j = 0;
var n,ImgID;
var a=new Array(FallNo);
var Pleft=new Array(FallNo);
var DownStep=new Array(FallNo);
var Pivot=new Array(FallNo);
var SwingWidth=new Array(FallNo);

//▼▼▼　画像タグ絵画と初期パラメータ設定
for (n=1;n<FallNo;n++){
	ImgTag="<img src='"+SnowImg[j]+"' id='snow"+n+"' style='position:absolute;z-index:5;opacity:"+opa+";'>";
if (j == (SnowImg.length-1)) { j = 0; } else { j += 1; }
	document.write(ImgTag);

	a[n]=Math.random()*document.documentElement.clientWidth-document.documentElement.clientWidth;
	Pivot[n]=Math.random()*(document.documentElement.clientWidth-75)+25;
	DownStep[n]=Math.random()*(DownStepMax-DownStepMin)+DownStepMin;
	SwingWidth[n]=Math.random()*(SwingWidthMax-SwingWidthMin)+SwingWidthMin;
}
setInterval("move()",50);

//▼▼▼　画像移動処理
function move(){
	for (n=1;n<FallNo;n++){
		if (document.documentElement.clientHeight+0 <= a[n]) {
			ResetParamator();
		}
		a[n]=a[n]+DownStep[n];

		Pleft[n]=Math.sin(a[n]/Ramd)*SwingWidth[n]+Pivot[n];
		ImgID="snow"+n
		document.getElementById(ImgID).style.left=Pleft[n]+"px";
		document.getElementById(ImgID).style.top=a[n]+"px";
	}
}

//▼▼▼　下まで落ちた物の落下パラメータを再設定
function ResetParamator(){     
	a[n]=-30;
	Pivot[n]=Math.random()*(document.documentElement.clientWidth-75)+25;
	DownStep[n]=Math.random()*(DownStepMax-DownStepMin)+DownStepMin;
	SwingWidth[n]=Math.random()*(SwingWidthMax-SwingWidthMin)+SwingWidthMin;
}

//-->
</script>
<!--★ここまでコピー-->
<br><br><br>
</body>
</html>

降る上る２３■画像D■ 降る画像変化(四季と数字指定) UP日時 : 2014/09/16

　降る上る２３■画像D■　降る画像変化(四季と数字指定)　　　　　UP日時 : 2014/09/16