合体２■画像が流れるスライド文字入り

●2016/06/14：即時関数で囲んで、グローバル変数を消しました。
スライドショーの上を花が流れ、その領域にタイトル文字等を入れたJavaScriptです。
JavaScriptは合体させずに、２個別々に記述してあります。
それを、bodyに記述した、<div id="waku">～～～</div>の中で、呼び出します。
今回使用したスライド画像はポーズが同じの色違いの少女なので、GIFアニメのように見えます。

２個のJavaScriptは、それぞれのソースの中で、「position:absolute;top:0;left:0;」指定をしてあるので、「id="waku"」の中に納まります。
合体して１個のJavaScriptにすると、同じ変数を変更する必要があるので、面倒なので２個記述にしました。
この方法だと、文字部分も、<div id="waku">～～～</div>の領域中で、「position:absolute;」指定で記述すればいいので、簡単です。
領域の中の文字の位置指定の方法の参考はAllAboutから。

■合体元JavaScriptはこちら→　OpenSpace３■画像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>合体２■画像が流れるスライド文字入り</title>

<!--★コピーここから-->
<style type="text/css"><!--

body{background:#def;}/*★背景色水色。不要なら削除*/

/*★必須。スライド表示位置とサイズと装飾指定。位置とサイズは必須。*/
#waku{
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:50px auto 50px;/*★水平中央位置指定(上、左右、下)*/
width:700px;/*★必須。スライド画像の横幅*/
height:400px;/*★必須。スライド画像の縦幅*/
border-radius:30px 10px;/*★角丸指定。お好みで*/
border:solid 3px #55f;/*★枠線指定。青色。お好みで*/
box-shadow:5px 5px 10px #ccc inset;/*★内側の影指定。お好みで*/
}

/*★以下はスライド領域の文字の指定。不要なら削除。#wakuを基準としたposition:absolute;で指定*/
.title{ position:absolute; top:30px; right:40px; color:#fff;font-size:40px; text-shadow:0px 0px 20px #f00;}
#waku p{ position:absolute; width:300px; bottom:10px;right:20px; text-align:center; color:#fcc; text-shadow:1px 1px 1px #f00;}
/*★スライド領域の文字の指定ここまで*/

--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから-->

<div id="waku"><!--★スライド表示領域開始。id="wakuは必須"-->
<img src="wh2.jpg" id="mGa"><!--★スライドショー分。id="mGa"は必須。一番最初のスライド画像名を記述-->
<div id="zon"></div><!--★流れる画像分。id="zon"は必須-->

<div class="title">動くJavaScript</div><!--★タイトル分。不要なら削除-->
<p>－welcome－<br>コピーだけで動作する<br>JavaScriptのサンプルを紹介するサイト</p><!--★見本文章分。不要なら削除-->

</div><!--★スライド表示領域終了-->


<!--★JavaScriptは２個あります。上がスライドショー分、下が流れる画像分です-->

<script type="text/javascript"><!--
//簡単スライドショー===============================================
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["wh2.jpg","wh3.jpg","wh4.jpg"];   
var myurl="";           //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=2000;　      //★画像切替時間 1000=1秒

//指定ここまで------------------------------------------------------------------
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var i=0;
var aa=document.getElementById("mGa");
aa.style.width=waku.clientWidth+"px";aa.style.height=waku.clientHeight+"px";//●サイズはwakuのサイズ
aa.style.position="absolute";aa.style.top=0;aa.style.left=0;aa.style.zIndex=-1;
function chbg(){ aa.src=myurl+ga[i%len]; i++; setTimeout(chbg,spd);}
chbg();
}());//即時関数終了
// --></script>

<script type="text/javascript"><!--
/*=============================================================================================
画像が流れる・４方向選択の範囲指定： 　複数画像、透過指定、HTML5対応、４方向選択、範囲指定へ改造  ★2016/06/14
By　http://www.openspc2.org/reibun/javascript/graphic/022/index.html (サイト名 OpenSpace)
================================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var move=3;//★画像の流れる向き指定 1=下へ 2=上へ 3=左から右 4=右から左*/

//★流れる画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var snow =["wh5.gif","wh6.gif","wh7.gif","wh8.gif"];

var num=20;         //★流れる画像表示数
var imgw=40;        //★流れる画像の最大横サイズ 
var imgh=40;        //★流れる画像の最大縦サイズ
var spd=50;         //★原本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 zonw=waku.clientWidth, zonh=waku.clientHeight;//●waku範囲指定に修正
var w=zonw+imgw, h=zonh+imgh;//画像表示幅追加
var sss='<div style="position:absolute;width:'+zonw+'px;height:'+zonh+'px;">';
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;//追加
sss +='<img src='+snow[i%len]+' id="sn'+i+'">';
}
sss +='</div>';
document.getElementById("zon").innerHTML=sss;//■範囲指定用追加

function moveSnow(){
for (i=0; i<num; i++){
if (move===1) { sy[i] +=sp[i]; if(sy[i]>h){ sy[i]=0; }}//★下向き
if (move===2) { sy[i] -=sp[i]; if(sy[i]<0){ sy[i]=h; }}//★上向き
if (move===3) { sx[i] +=sp[i]; if(sx[i]>w){ sx[i]=0; }}//★左から右
if (move===4) { sx[i] -=sp[i]; if(sx[i]<0){ sx[i]=w; }}//★右から左
var ob=document.getElementById("sn"+i).style;
ob.top=-imgh+sy[i]+"px"; ob.left=-imgw+sx[i]+"px";
ob.position="absolute"; ob.opacity=opa[i];//修正
}
setTimeout(moveSnow,spd);
}
moveSnow();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

合体２■Up+Sl■画像が流れるスライド文字入り UP日時 : 2016/06/14

　合体２■Up+Sl■画像が流れるスライド文字入り　　　　　UP日時 : 2016/06/14