Altan９■画像D■　枠の中で画像が上る

■2015/11/05：JavaScriptの「++i」と「i++」を「i++」で統一していましたが、意味が違うそうなので原本通りに修正。
■2015/12/12：JavaScriptのソースを２行削除。
■2016/06/04：範囲指定の方法を簡略化。

●2016/06/04：即時関数で囲んで、グローバル変数を消しました。

■全面に、画像実寸か比率表示の画像が上るJavaScriptはこちら→　Altan５■画像D■複数種類の透過の画像が上る

上記のJavaScriptを改造しました。範囲指定を付けて、枠の中でだけシャボン玉が上ります。
画像サイズ指定に、transform: scale() を付加しています。
これは使用する複数種類の画像サイズが全体的に少し大きめか小さめで、さらに複数種類の画像が同じサイズで無い時に利用すると便利です。

shabon1.png

shabon2.png

shabon3.png

shabon4.png

w50.png

私の作成した
背景透過png。
右クリックで
どうぞ。

■枠指定で、サイズと角度変化の画像が上るJavaScriptはこちら→　Altan１０■画像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>Altan９■画像D■　枠の中で画像が上る</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background-color:#fdf;}/*★背景色指定　薄ピンク*/

/*★範囲指定用。#zonは必須*/
#zon{
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
width:352px;/*★必須。範囲指定の横幅。今回は少女の画像横幅*/
height:500px;/*★必須。範囲指定の縦幅。今回は少女の画像縦幅*/
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:50px auto;/*★上下、左右の位置指定*/
background:url(hpo1.jpg);/*★背景画像に少女の画像指定。背景色のみ指定でも可*/
border:solid 2px #fff;/*★枠線指定。白色。お好みで*/
box-shadow:5px 5px 10px #666 inset;/*★内側の影指定。お好みで*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記１行が範囲指定の位置。id="zon"は必須。-->
<div id="zon"></div>

<script type="text/javascript"><!--
/*=====================================================================================================
複数種類の画像が上る(Altan改造)の範囲指定　　向きを上へ 複数種類の透過画像指定 旧ブラウザ対応削除 画像サイズ比率指定★2016/06/04
 * 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=["shabon1.png","shabon2.png","shabon3.png","shabon4.png","w50.png"];
var num=20;           // snow number★画像表示数
var imgw=50;         //★使用画像の最大実寸横幅 
var imgh=50;         //★使用画像の最大実寸縦幅
var Sca=1.2;         //★使用画像の表示比率。大きい画像なので縦横70%表示指定。大きくも小さくも可。原寸大表示の時はvar Sca=1;で
var maxOp=1;         //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.7;      //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var yure=15;         //★原本20。横揺れが大きい時は、数値を小さくする
var spd=10;          //smaller number moves the snow faster★原本10。降る速さ。数値が小さいほど速い
var hidesnowtime=0;  //★形成する画像はx秒の後に消える。原本0。10と指定すると10秒後に降るのが停止

//指定ここまで-----------------------------------------------------------------------------------------
var snowtimer=null;  //タイマ変数初期化
var i=0; 
var zonw=zon.clientWidth, zonh=zon.clientHeight;//範囲指定に修正
var dx=[], xp=[], yp=[], am=[], stx=[], sty=[], opa=[];//追加有り
var w=zonw+imgw*Sca, h=zonh+imgh*Sca;//画像表示幅追加
var sss='<div style="position:absolute;width:'+zonw+'px;height:'+zonh+'px;">';
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()*yure;        // set amplitude variables■原本のyureは20
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)];//追加
sss +='<img src='+randomGa+' id="dot'+i+'">';
}
sss +='</div>';
document.getElementById("zon").innerHTML=sss;//■範囲指定用追加

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="absolute"; 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/06/04

　Altan９■画像D■　枠の中で画像が上る　　　　最終修正日 : 2016/06/04