OpenSpace１■画像D■　画像が降る

●2016/03/10：即時関数で囲んで、グローバル変数を消しました。
原本は、いままでの『雪が降る』のJavaScriptの中では、最も短いソースです。
その分、動きもシンプルで横揺れはしません。

原本をHTML5対応にし、画像を複数指定、ランダム透過指定ができるようにしました。
それから降ってくる画像が文章の上に降らない指定も、JavaScript のソースの中でできます。
その時に見本のように、文章の上には降らなくていいが画像の上には降らせたい場合は、画像に別に指定をします。
記述見本があるので参考にして下さい。原本は OpenSpace から。

■2016/03/10：スクロールの選択制を止めて position="fixed";に統一。
■2016/06/07：速度指定を間違っていたので修正。
■2016/06/27：微修正。

<!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>OpenSpace１■画像D■　画像が降る</title>

<style type="text/css"><!--
body{ background:#dfd; }/*★背景色指定薄い緑色。不要なら削除*/
--></style>

</head>
<body>

<img src="pp2.jpg" style="position:absolute; top:100px; left:100px;width:366px; height:330px; border-radius:10%;border:dotted 5px #ea3;box-shadow: 0 0 0 10px #fff;z-index:-2;">
<!--★↑これは女の子の画像です。削除可ですが、記述見本です。女の子の画像の上に降らせる時は、 上記通りz-index:-2;で。
降らせない時はマイナスを消してz-index:2;に変更して下さい。
下の文章についてはJavaScriptのソースの中で指定します。
この女の子の画像の「z-index:●;」指定全部を消すと、文章と同じ指定になります -->


<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*===============================================
雪が降る： 複数画像、透過指定、HTML5対応へ改造  ★2016/06/27
By　http://www.openspc2.org/reibun/javascript/graphic/022/index.html (サイト名 OpenSpace)
======================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★流れる画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var snow =["kio4.gif","kio5.gif","kio6.gif","kio8.gif"];
var Zx="-1";         //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var num=20;          //★流れる画像の表示数
var imgw=34;         //★流れる画像の最大横サイズ
var imgh=34;         //★流れる画像の最大縦サイズ
var spd=80;          //★原本100。流れる速さ。小さいほど速い
var maxOp=0.9;       //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.4;      //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする

//指定ここまで--------------------------------------------------------------------------
var sx=[], sy=[], sp=[], opa=[];//追加有り
var len=snow.length, i=0;
var w=window.innerWidth+imgw, h=window.innerHeight+imgh;//修正
for (i=0; i<num; i++){
sx[i]=Math.floor(Math.random()*w);
sy[i]=Math.floor(Math.random()*h);
sp[i]=Math.floor(Math.random()*6)+2;//修正
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
document.write("<img src="+snow[i%len]+" id='sn"+i+"'>");
}
function moveSnow(){
for (i=0; i<num; i++){
sy[i] += sp[i];
if (sy[i]>h){ sy[i]=0;}//■-10を -imghへ→2016/06/27　0へ修正
var ob=document.getElementById("sn"+i).style;
ob.top=-imgh+sy[i]+"px"; ob.left=-imgw+sx[i]+"px";//■-imghと-imgwをそれぞれ追加
ob.position="fixed"; ob.zIndex=Zx; ob.opacity=opa[i];//追加
}
setTimeout(moveSnow,spd);
}
moveSnow();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

OpenSpace１■画像D■ 画像が降る 最終修正日 : 2016/06/27

　OpenSpace１■画像D■　画像が降る　　　　　最終修正日 : 2016/06/27