Altan５　複数種類の透過の画像が上る

■2015/11/05：JavaScriptの「++i」と「i++」を「i++」で統一していましたが、意味が違うそうなので原本通りに修正。
■2015/11/05：選択制を止めて position="fixed";に統一。w と h の値を範囲指定に変更しやすいように修正。
■2015/12/12：JavaScriptのソースを２行削除。

●2016/01/25：即時関数で囲んで、グローバル変数を消しました。
Altan２■画像D■複数種類の透過の雪が降るを改造した、下から上へ画像が上るJavaScriptです。
複数種類の画像使用、ランダムの透過指定付き、スクロール指定選択（←この見本では固定）と文章の上に画像が上るか、文章の下に隠れるか（←この見本では隠れる）の指定選択等も、同様に指定可能です。

今回はさらに上る画像サイズ指定に、transform: scale()を付加しています。
これは使用する複数種類の画像サイズが全体的に少し大きめか小さめで、さらに複数種類の画像が同じサイズで無い時に利用すると便利です。
見本ではJavaScriptのソースの中で、「var Sca=0.6;」の指定で、全部の画像サイズを実寸サイズの60%表示にしています。
「var Sca=0.5;」なら50%、「var Sca=1.2;」なら120%、「var Sca=1;」で実寸サイズになります。
たとえば実寸が、横100px縦200pxの画像は「var Sca=0.5;」指定で横50px縦100pxで表示されます。
実寸とあまりにも違いすぎる拡大縮小はおすすめしませんが、ちょっとしたサイズ修正に便利です。
transform: scale()の解説は、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>Altan５　複数種類の透過の画像が上る</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body { 
background:url(../bg/k7/soko9.jpg) fixed repeat-x #fff;/*★背景画像指定。固定指定。繰り返し横。背景色白色*/
background-position:0% 100%;/*★背景画像位置指定　下側*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================================
複数種類の画像が上る(Altan改造)　向きを上へ 複数種類の透過画像指定 旧ブラウザ対応削除 画像サイズ比率指定★2016/01/25
 * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
 * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
 * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
===============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var ga=["../mouse/an18.gif","../mouse/an19.gif","../mouse/an20.gif","../mouse/an21.gif","../mouse/an22.gif"];
var Zx=-1;           //★文章の上に画像が流れるか？　上に流れる：1   下に隠れる：-1
var num=15;          // snow number★画像表示数
var imgw=150;        //★使用画像の最大実寸横幅
var imgh=266;        //★使用画像の最大実寸縦幅
var Sca=0.6;         //★使用画像の表示比率。大きい画像なので縦横60%表示指定。大きくも小さくも可。原寸大表示の時はvar Sca=1;で
var maxOp=1;         //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.8;      //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var spd=10;          //smaller number moves the snow faster★上る速さ。数値が小さいほど速い
var hidesnowtime=0;  //★形成する画像はx秒の後に消える。原本0。10と指定すると10秒後に上るのが停止

var snowtimer=null;  //タイマ変数初期化
var i=0; 
var w=window.innerWidth+imgw*Sca, h=window.innerHeight+imgh*Sca;//■画像表示幅追加
var dx=[], xp=[], yp=[], am=[], stx=[], sty=[];
var opa=[];//■追加
for (i=0; i<num;  ++i) {
dx[i] = 0;                         // set coordinate variables
xp[i] = Math.random()*w;           // set position variables■原本*(w-50)
yp[i] = Math.random()*h;
am[i] = Math.random()*20;          // set amplitude variables
stx[i] = 0.02 + Math.random()/10;  // set step variables
sty[i] = 0.7 + Math.random();      // set step variables
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;          //■追加
var randomGa=ga[Math.floor(Math.random()*ga.length)];//■追加
document.write('<img src='+randomGa+' id="dot'+i+'">');
}
function Snow(){  
for (i=0; i<num; ++i) {        /* iterate for every dot*/
yp[i] -=sty[i];                //■+を-へ変更
if (yp[i] <0) {　　            /*■(yp[i] >h-50)を変更→0*/
xp[i]=Math.random()*(w-am[i]); /*■原本w-am[i]-30*/
yp[i]=h;　                     //■0をhへ変更
}
dx[i]+=stx[i];
var ob=document.getElementById("dot"+i).style;
ob.top=-imgh*Sca+yp[i]+"px";//■-imgh*Sca+追加
ob.left=-imgw*Sca+xp[i]+am[i]*Math.sin(dx[i])+"px";//■-imgw*Sca+追加
ob.position="fixed"; ob.zIndex=Zx; ob.opacity=opa[i]; ob.transform="scale("+Sca+")";//■追加
}
snowtimer=setTimeout(Snow, spd);
}
function hidesnow(){
if (window.snowtimer){clearTimeout(snowtimer);}
for (i=0; i<num; i++){document.getElementById("dot"+i).style.visibility="hidden";}
}
Snow();
if (hidesnowtime>0){ setTimeout(hidesnow, hidesnowtime*1000)}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

Altan５■画像D■ 複数種類の透過の画像が上る 最終修正日 : 2016/01/25

　Altan５■画像D■　複数種類の透過の画像が上る　　　　最終修正日 : 2016/01/25