質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

771閲覧

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

masatamu

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/02/21 02:33

編集2023/02/21 02:36

実現したいこと
背景の上を鳥や飛行機が個別のパーツとしてループして動くという実装をしたいです。
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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2023/02/21 03:05

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

2023/02/21 04:19

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

回答2

0

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

ありがとうございます!
guest

0

ベストアンサー

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>

投稿2023/02/21 02:55

yambejp

総合スコア115275

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masatamu

2023/02/22 11:39

cssでもできるのですね!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問