合体３■画像が流れるフェードのスライド文字入り

<!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:#000;}/*★背景色指定黒色。この行は不要なら削除*/

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

/*★背景画像の表示方法指定。ここで何も指定しないと敷詰表示になります*/
#Fb1,#Fb2{
background-repeat:no-repeat;/*★背景画像繰り返し無し。今回は表示サイズが画像サイズと同じなので、削除しても可*/
border-radius:10px;/*★角丸指定。お好みで●●#wakuでの指定と同じ。クロムとオペラ用。IEとFFは不要●●*/
}

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

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

</head>
<body>

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

<div id="waku"><!--★スライド表示領域開始。id="wakuは必須"-->

<div id="Fsn"></div><!--★スライドショー分。id="Fsn"は必須-->

<div id="zon"></div><!--★流れる画像分。id="zon"は必須-->

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

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


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

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードのスライドを、文字入り背景画像のスライドショーへ変更　　★2016/06/14
By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★スライド背景画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["af1.jpg","af2.jpg","af3.jpg","pt60.jpg","af4.jpg"];   
var myurl="";              //★スライド画像パス。文書とは別のフォルダーなどに入っている時は指定。スライド全画像共通部分
var spd=4000;　            //★画像切替時間 1000=1秒 スライド速度。下記のCSS指定のフェード変化時間より長くする
var csstr="transition:opacity 1s ease-in-out;"; //★CSSの背景画像のフェード変化時間。1sは１秒。意味がわかるなら変更可

//指定ここまで---------------------------------------------------------------------------------------
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=-1;		         //現在表示している配列番号
var myflg=0;		         //どっちを表示して、どっちを消すかのフラグ
function myChange(){             /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　      //次の配列番号
myflg=(myflg==0) ? 1 : 0;        //表示・非表示フラグ反転
var a=document.getElementById("Fb1").style;
var b=document.getElementById("Fb2").style;
if (myflg==0){ a.backgroundImage="url("+myurl+ga[i]+")"; a.opacity=1; b.opacity=0; } //次の画像をセット。フェードイン。フェードアウト
else{ b.backgroundImage="url("+myurl+ga[i]+")"; a.opacity=0; b.opacity=1; } //次の画像をセット。フェードアウト。フェードイン
setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}
var w=waku.clientWidth, h=waku.clientHeight;//フェード領域の横幅と縦幅●wakuのサイズと同じ
var cssf=csstr+'position:absolute; top:0; left:0; width:'+w+'px; height:'+h+'px;z-index:-1;';
var sss='<div id="Fb1" style="'+cssf+'"></div><div id="Fb2" style="'+cssf+'"></div>';
document.getElementById("Fsn").innerHTML=sss;
var bb=document.getElementById("Fsn").style;
bb.width=w+"px";bb.height=h+"px";bb.position="absolute";bb.top=0;bb.left=0;bb.zIndex=-1;
myChange();
}());//即時関数終了
// --></script>

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

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

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

var num=20;         //★流れる画像表示数
var imgw=20;        //★流れる画像の最大横サイズ 
var imgh=20;        //★流れる画像の最大縦サイズ
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+Mv■ 画像が流れるフェードのスライド文字入り UP日時 : 2016/06/14

　合体３■Up+Mv■　画像が流れるフェードのスライド文字入り　　　　　UP日時 : 2016/06/14
