ループで動かしている要素が一度しか表示されない

実現したいこと
背景の上を鳥や飛行機が個別のパーツとしてループして動くという実装をしたいです。
airplaneで指定している飛行機は右から左への動きで、画面外までいったらまだ右画面端から出てくるという動きが実現できているのですが、airplane02では、左斜め上に動くという記述を書いていて、ページ読み込み時一回目は正常な動きをするのですが、ループで戻ってきません。（本来なら画面右下からまた出現してほしい）検証ツールで見ると動いているようですが、見えてない状態のような感じです。

また鳥の画像を添付していますが、鳥がバサバサと動いて上に飛んでいくループ処理とかってできるのでしょうか？
よろしくお願いいたします。

下記がコードになります。
htmlとjs

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>テスト</title>
</head>

<link rel="stylesheet" href="css/style.css">

<body>
  <div class="bg_area">
    <div class="airplane"></div>
    <div class="airplane02"><img src="img/air_plane02.png" alt="" id="airplane02"></div>
    <div class="bird"></div>

    <!-- <p class="content">
      コンテンツが入ります
    </p> -->
  </div>

  <script>
    //飛行機01
    const airplane = document.querySelector(".airplane");
    let xAirplane = -100;

    function moveAirplane() {
      xAirplane += 1;
      if (xAirplane > window.innerWidth) {
        xAirplane = -100;
      }
      airplane.style.right = xAirplane + "px";
      requestAnimationFrame(moveAirplane);
    }
    moveAirplane();
  </script>

  <script>
    //飛行機02
    // imgタグを取得
    var airplane02 = document.getElementById("airplane02");

    // 初期位置の設定
    var posX = 0;
    var posY = 0;

    // アニメーションの設定
    function moveAirplane02() {
      // 斜め左上に移動する
      posX -= 1;
      posY -= 1;
      airplane02.style.transform = "translate(" + posX + "px, " + posY + "px)";

      // アニメーションを継続する
      requestAnimationFrame(moveAirplane02);
    }

    // アニメーションを開始する
    requestAnimationFrame(moveAirplane02);
  </script>

</body>

</html>


css
.bg_area::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #63cae4;
    z-index: -1;
}

.airplane {
    position: absolute;
    top: 100px;
    right: -100px;
    width: 200px;
    height: 100px;
    background-image: url("../img/air_plane.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .airplane02 {
    position: absolute;
    bottom: -100px;
    right: 500px;
  }

  .airplane02 img {
    width: 200px;
    height: auto;
  }

  .bird {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 300px;
      height: 100px;
      background-image: url("../img/bird.png");
      background-size: contain;
      background-repeat: no-repeat;
  }
.content {
    width: 50%;
    max-width: 500px;
    height: 500px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 50vw;
}

hoshi-takanori

2023/02/21 03:05

moveAirplane には画面からはみ出したら元の位置に戻す処理が書いてあるように見えますが、moveAirplane02 には見当たらないですね…。

masatamu

2023/02/21 04:19

ご回答ありがとうございます。私がjs初心者で自分で書いた記述ではないので良くわかっていないのですが、 moveAirplane02に元の位置に戻す処理を書くとすると、どこにどのようの記述すれば良いのでしょうか？お手数をおかけしますが、教えていただけますと幸いです。。

行動規範の内容に同意します

回答2件

javascriptでやる場合の回答ですが、質問への質問で記述されている通り
moveAirplane02 に位置をリセットする処理が記述されていません。
どういうアニメーションにするのかによる部分はありますが、以下のような感じでとりあえず動きます。

        function moveAirplane02() {
            // このif文を追加する。 +100 の部分は鳥が画面外に飛び立つのを待つためのものなので適宜調整
            if (Math.abs(posY) > (window.innerHeight + 100)) {
                posX = 0;
                posY = 0;
            } 

            // 斜め左上に移動する
            posX -= 1;
            posY -= 1;
            airplane02.style.transform = "translate(" + posX + "px, " + posY + "px)";

            // アニメーションを継続する
            requestAnimationFrame(moveAirplane02);
        }

投稿2023/02/21 06:23

YakumoSaki

総合スコア2027

masatamu

2023/02/22 11:38

ありがとうございます！

行動規範の内容に同意します

ベストアンサー

cssではだめなのでしょうか？

CSS
1<style>
2.bg_area{
3position:relative;
4}
5.airplane02{
6position:absolute;
7  animation: anime 3s linear infinite; 
8  animation-fill-mode:forwards;
9}
10@keyframes anime{
11  from{ top: 0;left:0}
12  to  { top:-200px;left:-200px}
13}
14</style>
15<div class="bg_area">
16<div class="airplane02">
17<img src="" alt="飛行機">
18</div>