その他　変身４■複数の画像並べて３変身

●2021/10/02：即時関数で囲んで、グローバル変数を消しました。

■並んだフグがランダムで変身するJavaScriptはこちら→　変身１■膨らむフグ-基本（後ろにサメ）

上記のJavaScriptを改造しました。
ランダムに並んだ複数画像がランダムに３種類の変化をします。
見本では３種類の画像をランダムに８枚並べました。
画像種類は増減可能です。並べる枚数も増減可能です。

その画像を並べ、CSSアニメの指定を使って「サイズ変化」と「左右回転」と「左右反転」の３種類でランダム変化させています。

CSSアニメの回転作成方法は意外と知られていないCSSの色々な回転アニメーションの作成方法から。
CSSアニメの総合的な記述方法は【CSS】animation・keyframesを徹底解説から。
CSSの左右反転については【CSS】transform: scale()で要素を上下・左右に反転させる方法から。

■並んだ複数の画像がランダムに変身するJavaScript関連コーナーはこちら→　その他・変身・メニュー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他　変身４■複数の画像並べて３変身</title>

<!--★ここからコピー-->
<style>
body{
background: linear-gradient(#fc4,#fff);/*★上からのグラデーション指定。オレンジ色、白色。*/
background-attachment:fixed;/*★要素が少ない場合グラデーションが途中で切れないようにする*/
}

/*★#bsは必須。ダンサーの表示領域。指定内容はお好みで*/
#bs{
margin:50px 5%;/*★位置とサイズ指定。上下50px、左右5%は全体の90%の横幅*/
background: linear-gradient(#adf, #fff);/*★上からのグラデーション指定。水色、白色*/
height:200px;/*★表示領域の縦幅*/
border-bottom:groove 20px #f50;/*★下だけ枠線。オレンジ色の立体枠線*/
text-align:center;/*★画像は左右の中央寄せ*/
}
  
#bs img{margin-top:50px;}/*★ダンサーの表示位置調整。不要なら削除*/
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記１行はダンサーの表示位置。id="bs"は必須-->
<div id="bs"></div>

<!--★下記は単なる「更新ボタン」です。不要なら削除-->
<p style="text-align:center;"><input type="button" value="並び替え" onclick="location.reload(true)"></p>

<script type="text/javascript"><!--
/*================================================================================
ランダムに並んだ複数画像がランダム複数変身
by 鴈野さんちのホームページ：https://t-karino.sakura.ne.jp/tk/java/java1/senobi.html
画像記述とdocument.imagesを修正  2021/10/02
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★ダンサーの画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var Img1=["ira32.png","ira33.png","ira34.png"];
var myurl="";           //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var num=8;              //★表示したいダンサーの画像の総数。画像指定数より多くても可。
var spd=2000;　　　　　 //★変身速度。1000=1秒。小さいほど速い。原本400。
var Acss="transition:all 1s;";　//★cssアニメの変化指定。1sは1秒。上記の変身速度の1/2以下で。

//指定ここまで--------------------------------------------------------------------------
var len=Img1.length;
var sss='';
for (var i=0; i < num; i++) {
var r=Math.floor(Math.random()*len);
sss +='<img src='+myurl+Img1[r]+' style="'+Acss+'">';
}
document.getElementById("bs").insertAdjacentHTML('afterbegin', sss);
var Imgs=bs.getElementsByTagName("img");  //id="bs"領域のimgの総数

var seqNo=0,seqNo2=0;			  //変身するダンサーの位置
var timerID=num;	                  //タイマー番号(ダンサーの数だけ必要)
function start(){ timerID=setInterval(timerD,spd);}//ロード完了時のタイマースタート

/*★別の変化を付けたいときは下記で修正*/
function timerD(){
Imgs[seqNo].style.transform="scale(1) rotateY(0deg)";	   //前回ダンサーのサイズ戻し回転停止	                 
Imgs[seqNo2].style.transform="scale(1) rotateY(0deg)";	   //前回ダンサーのサイズ戻し回転停止
seqNo=Math.floor(Math.random()*num);                       //変身する位置を乱数で求める
seqNo2=Math.floor(Math.random()*num);                      //変身する位置を乱数で求める
Imgs[seqNo].style.transform="scale(1.5) rotateY(360deg)";  //ダンサーのサイズを1.5倍と左右回転
Imgs[seqNo2].style.transform="scaleX(-1) rotateY(360deg)"; //ダンサーを左右反転と左右回転
}
start();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

変身４■複数の画像並べて３変身 UP日時 : 2021/10/02

　変身４■複数の画像並べて３変身　　　　UP日時 : 2021/10/02