kurt.grigg３-２■画像■　CSSアニメの魔女が舞う

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

■1個の画像が舞うJavaScriptはこちら→　■kurt.grigg３■画像■蝶が舞う

上記のkurt.griggのJavaScriptを改造しました。
蝶ではなく若い魔女がCSS指定のアニメで変化しながら舞うJavaScriptです。
CSSアニメの詳しい説明は、【CSS】animation・keyframesを徹底解説でどうぞ。

今回は初めてJavaScriptのソースの記述で、「document.write」や「innerHTML」ではなく「insertAdjacentHTML」を使用。
これが最新式なんだそうです。
この方法を使ってCSSアニメの記述もJavaScriptのソースの中でできるのですが、使用する画像によっては指定したいアニメ変化の種類も違うだろうと、今回はあえてソースの外に出して、CSSで記述するようにしました。

JavaScriptとは無関係ですが、右から左へ流れている2人の魔女はCSSで動いています。
昔はmarquee（マーキー）タグを使用したものですが、HTML5ではマーキーは非推奨タグなのでCSSを使用。
そのCSSの詳しい説明は、CMANでどうぞ。

今回は透過、回転、サイズ変化等の指定は、CSSを使用しています。
JavaScriptで動かしているのは、若い魔女の舞う動作だけです。
念のため、魔女3人の画像実寸を記述。

・舞う若い魔女は横300px 縦270px。CSSで透過と回転とサイズ変化を指定。
・流れる年寄り魔女は横200px 縦194px。CSSで移動とサイズ変化を指定。
・同じく流れる猫を連れた中年魔女は横140px 縦125px。CSSで移動とサイズ変化を指定。

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

2021/09/02：★注意！★
JavaScriptの指定で「opacity:0;」を指定しているので、CSSの#picsのアニメ指定 @keyframes dance{～～｝では、必ずopacity（透過）の指定を入れて下さい。
もし透過を使用したくない時でも 0% 時の記述も 100% 時の記述も「opacity:1;」の指定が必須です。
指定しないと舞う若い魔女の画像が表示されません。
流れる二人の魔女については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>kurt.grigg３-２■画像■　CSSアニメの魔女が舞う</title>

<!--★ここからコピー-->
<style>
body{
background:url(gh22.jpg) no-repeat #000;/*★カボチャの背景画像、繰り返し無し、背景色黒色指定*/
background-size:100% auto;/*★背景画像横幅100%指定。カボチャの背景画像の実寸は横800px縦500px*/
}

/*★舞う魔女の変化指定。#picsは必須。cssアニメがわかるならお好みで変更可能*/
/*■参考：https://webdesignday.jp/inspiration/technique/css/5167/ */
/*★opacity指定は必須。使いたくない時は0%時も100%時も「1」を指定*/
#pics { animation:dance 2s ease-in 1s infinite alternate;}

@keyframes dance{
0% {opacity:0.5; transform:scale(0.2) rotate(0deg);}/*★opacity指定は必須*/
100%{opacity:1; transform:scale(1) rotate(360deg);}/*★opacity指定は必須*/
}

/*★これより下記は流れる魔女2人の指定。不要なら削除*/
/*★position指定が無いとz-index指定が効かないので舞う魔女の下にするために指定。不要なら削除*/
.scroll { margin-top:200px; width:100%; overflow:hidden; position:relative; z-index:-2;}
.scroll img{ padding-left: 100%; animation:scrollAnime 10s linear infinite;}

@keyframes scrollAnime{ 
0% { transform:translateX(0) scale(1);}
100% { transform:translateX(-100%) scale(0.3);}
}
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

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

<!--★下記1行は流れる魔女2人の指定。不要なら削除-->
<div class="scroll"><img src="ira7.gif"><br><img src="kc23bbb.png"></div>

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

var Pic="gh20.png";  //★舞う若い魔女の画像指定
var inZ=-1;          //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var spd=10;          //★速度。原本10。数値が大きいほど遅い

//指定ここまで------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/

var sss='<img src='+Pic+' id="pics" style="position:fixed; z-index:'+inZ+';opacity:0;">';
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,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);
}
Curve(); MoveRandom();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

kurt.grigg３-２■画像■ CSSアニメの魔女が舞う UP日時 : 2021/09/01

　kurt.grigg３-２■画像■　CSSアニメの魔女が舞う　　　　UP日時 : 2021/09/01