その他　変身３■１個の画像並べて２変身

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

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

上記のJavaScriptを改造しました。
上記では「縮んだフグ」と「膨らんだフグ」の２枚の画像を使用しました。
今回使用するのは１枚の「ダンサーの画像」のみです。
その画像を並べて、CSSアニメの指定を使って「サイズ変化」と「上下回転」の２種類でランダム変化させています。

CSSアニメの回転作成方法は意外と知られていないCSSの色々な回転アニメーションの作成方法から。
CSSアニメの総合的な記述方法は【CSS】animation・keyframesを徹底解説から。

■並んだ複数の画像がランダムに変身する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:#fc4;}/*★背景色はオレンジ色。不要なら削除*/

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

</head>
<body>

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

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

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

//指定ここまで--------------------------------------------------------------------------
var sss='';
for (var i=0; i < num; i++) {
sss +='<img src='+Img1+' 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) rotateX(0deg)";	 //前回のダンサーのサイズ戻しと回転停止	                 
Imgs[seqNo2].style.transform="scale(1) rotateX(0deg)";	 //前回のダンサーのサイズ戻しと回転停止
seqNo=Math.floor(Math.random()*num);                     //変身する位置を乱数で求める
seqNo2=Math.floor(Math.random()*num);                    //変身する位置を乱数で求める、上下回転
Imgs[seqNo].style.transform="scale(1.5) rotateX(360deg)";//ダンサーのサイズを1.5倍と上下回転
Imgs[seqNo2].style.transform="scale(1) rotateX(360deg)"; //ダンサーを上下回転
}
start();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

変身３■１個の画像並べて２変身 UP日時 : 2021/09/28

　変身３■１個の画像並べて２変身　　　　UP日時 : 2021/09/28