kurt.grigg７-１■画像■　CSSアニメの怪物がスライドで会話

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

■一個のコメ無しスライド画像がランダムに飛び回るJavaScriptはこちら→　kurt.grigg７■画像■スライド苺が踊る

上記のスライドショーをしている画像がランダムに移動するJavaScriptを改造しました。
スライドショーをコメント付きにして、さらにCSSアニメ変化をします。
上記ではスライドショーの速度指定を速くして、画像を一個のGIFアニメ画像のように見せていました。

今回はスライドショーの速度を遅くし、さらにCSSアニメで透過変化やサイズ変化や回転指定を付けて、複数の怪物が同時に存在しているように見せています。

JavaScriptでは、コメント付きスライドショーとCSSアニメの速度は連動していないので、長時間後にはサイズ変化が小さくなる前にスライドの画像入れ替えが発生してしまいます。
でも、画像入れ替えとコメント入れ替えは同時に発生するので、ハロウィンのモンスター達だから、登場の仕方も変幻自在なんだと思ってもらえるのではないかと……今回は目をつぶって下さい、また勉強します。

なお、今回はインパクト狙いで、コメントを画面に大きく出しましたが、これは小さくても構いません。
「id="Me"」さえ指定すれば、どんな位置、どんな文字サイズ、どんな装飾を付けても自由です。

■画像がランダムに飛び回るkurt.grigg作成のJavaScript関連コーナーはこちら→　Kurt Grigg・メニュー

<!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>kurt.grigg７-１■画像■　CSSアニメの怪物がスライドで会話</title>

<!--★ここからコピー-->
<style type="text/css">
body{ background:url(hw/pct1.png) #000 no-repeat 30px 80px;}/*★城の背景画像指定。不要なら削除*/

/*★コメント用の指定。#Meは必須。内容指定はお好みで*/
#Me{
position:relative;/*★下記のz-indexを指定するならposition指定は必須。しないなら削除*/
z-index:2;/*★コメは画像の上。怪物の画像とコメが重なった時「-2」指定だと画像の下になる*/
margin-top:200px;/*★コメントの上からの位置*/
width:100%;/*★コメントの横幅。画面横一杯。変更可*/
text-align:center;/*★コメントの左右中央位置指定*/
font-size:50px;/*★文字の大きさ*/
color:#eee;/*★文字の色。薄い灰色*/
text-shadow:0px 0px 30px #f00;/*★文字に赤のボカシ*/
}
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->

<p id="Me"></p><!--★コメント指定。id="Me"を必ず記入-->

<script type="text/javascript"><!--
/*=====================================================================
画像1個をコメ付きスライドショーにしてランダム移動とCSSアニメ変化(ソース内)　
By　Random Movement Script by kurt.grigg@virgin.net　★旧ブラウザ分削除。HTML5対応、文章との重ね方追加
JS保管サイトhttp://www2.tky.3web.ne.jp/~ogura1/(消滅)　 2021/09/04
======================================================================*/
(function (){ var n=0,i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントの同時指定。増減可能。['画像','コメント'];　の２個をこの順番で記述。コメントにタグも使用可能
var Pic=[];
Pic[n++]=['hw/hw1.png','なんか一人だけ'];
Pic[n++]=['hw/hw2.png','怖～い俺たちとは'];
Pic[n++]=['hw/hw6.png','全然違う'];
Pic[n++]=['hw/hw8.png','場違いな奴がいるぞ'];
Pic[n++]=['an44.gif','<span style="color:pink;">え、だ、誰ですか？？</span>'];
Pic[n++]=['gh21s.png','<span style="font-size:20px;">誰かな～・・・</span>'];

var myurl="";       //★画像パス。文書とは別のフォルダーなどに入っている時は指定。同じ時は"";で
var inZ=-1;         //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var spd=20;         //★浮遊速度。原本10。数値が大きいほど遅い
var speed=4000;     //★画像のスライドショーの切替速度 1000=1秒

/*★↓↓下記からはJavaScriptのソース内でCSSアニメの指定。わかる方は好みで変更可*/
/*■参考：https://webdesignday.jp/inspiration/technique/css/5167/ */

var cssA='animation:dance 2s ease infinite alternate;';//★画像へのアニメ指定

/*★注意！★@keyframesでアニメーションを記述する方法はCSS内とJavaScript内では少し違います。*/
/*右端の「'」や左端の「'+」や「';」を決して削除しないで下さい。動作しなくなります。*/

var cssKF='@keyframes dance{ 0% {opacity:0.5; transform:scale(0) rotate(0deg);}'+
                           '100%{opacity:1; transform:scale(2) rotate(360deg);}}';

//指定ここまで---------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();   //画像先読み込み。切替をスムーズにする
for (var p=0,len=Pic.length; p<len; p++){load[p]=new Image();load[p].src=myurl+Pic[p][0];}
function mShow(){
$("pics").src=myurl+Pic[i%len][0]; $("Me").innerHTML=Pic[i%len][1]; i++; setTimeout(mShow,speed);}

var elem=document.getElementsByTagName('style')[0];/*■cssに@keyframes を記述*/
elem.insertAdjacentHTML('afterbegin',cssKF);

var sss="<img src="+myurl+Pic[0]+" id='pics' style='position:fixed; z-index:"+inZ+";opacity:0;"+cssA+"'>";
document.body.insertAdjacentHTML('afterbegin', sss);

var R=0,PB=0,RD=0,VB=0,HB=0;
var Y=10,X=10,D=Math.floor(Math.random()*60+10);
function Curve(){
var plusMinus=[1,-1,2,-2,3,-3,0,1,-1,4,-4];
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout(Curve,speed/2);//■原本1800なのをスライド速度の2分の1に変更。動作がおかしければ1800に戻す。
}
function MoveRandom(){
var H=window.innerHeight, W=window.innerWidth;
var BY=-(pics.offsetHeight), BX=-(pics.offsetWidth);
PB=D+=RD;
var y=3*Math.sin(PB*Math.PI/180);/*SY=3を数値で*/
var x=5*Math.cos(PB*Math.PI/180);/*SX=5を数値で*/
if (D<0){ D+=360;}
Y+=y; X+=x; VB=180-D; HB=0-D;
//Corner rebounds! not necessary but looks nice.
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
//Edge rebounds!
if (Y < 1) {Y=1;D=HB;}  
if (Y > H+BY) {Y=H+BY;D=HB;}  
if (X < 1) {X=1;D=VB;} 
if (X > W+BX) {X=W+BX;D=VB;} 
$("pics").style.top=Y+"px"; $("pics").style.left=X+"px";
setTimeout(MoveRandom,spd);
}
mShow(); Curve(); MoveRandom();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

kurt.grigg７-１■画像■ CSSアニメの怪物がスライドで会話 UP日時 : 2021/09/06

　kurt.grigg７-１■画像■　CSSアニメの怪物がスライドで会話　　　　UP日時 : 2021/09/06