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

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

ただいまの
回答率

90.48%

  • JavaScript

    17009questions

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

Javascript ふわふわ左右に動くアニメーション

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,056

yuyan

score 1

適当に要素を作ってそれをJavascriptで左右にアニメーションさせたいです。

具体的には、右に100px(任意)移動し、100px移動したら次は左に100px移動させ、それを永遠に繰り返す(右→左→右→左)記述を書きたいのですが、よくわからず質問させていただきました。

setTimeoutを使ってやればいいと思うのですが、どのような書き方をすれば実現できるでしょうか?

jQueryは使わずにJavascriptで記述したいです。

現状右に移動するだけの動作はできています。

------ HTML ------
<div id="rect">box</div>
------ HTML ------

------ CSS -------
#rect {
    width: 100px;
    height: 30px;
    background: #00f;
    color: #fff;
    text-align: center;
    margin: 0 20px;
}
------ CSS -------

------- JS -------
var startTime = Date.now();
var box = document.getElementById("rect");
var myTime = 500;
function rect() {
    var current = new Date() - startTime;
    if( current < myTime ) {
        var id = setTimeout(rect, 10);
        box.style.marginLeft = 20 + 20 * (current / myTime) + "px";
    }
}
rect();
------- JS -------


どうぞよろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kszk311

    2018/05/02 00:23

    CSSのアニメーションもできますが、Javascriptでの動作ですか?とりあえず途中かけでいいので、現在ここまで書いているコードを記載してください。

    キャンセル

  • yuyan

    2018/05/02 00:33 編集

    コメントいただきありがとうございます! 基本的にJavascriptでできると嬉しいです。 早速コード載せさせていただきました! お力添えいただけると幸いです。 どうぞよろしくお願いいたします。

    キャンセル

回答 5

+4

色々、検索していましたら、良さそうなのが見つかりましたので
元コードを自分なりに変更したものを載せさせて頂きます。

元コードはこちらのリンクの最初にあるコード例です。
https://developer.mozilla.org/en-US/Apps/Fundamentals/Performance/CSS_JavaScript_animation_performance

私が書いた、コードを始めに載せます。

var boxContainer = document.getElementById('rect');
var rafId;//requestAnimationFrame用のid

var duration = 1000;//アニメーションの実行時間
var translateX = 100;//移動するx座標の長さ
var start;
//animate関数の実行開始
rafId = window.requestAnimationFrame(animate);
function animate(time) {
  if (!start) {
    start = time;
    rafId = window.requestAnimationFrame(animate);
    return;
  }

  var progress = (time - start) / duration;
  var x = progress * translateX;
  var transform = 'translateX(' + x + 'px)';

  //右に移動が完了したらprogressは1以上、つまりこれは左に移動している時を表す。
  if (progress >= 1) {
  //translateXに1未満(2 - progress)の小数を掛けることで左に移動するためのxの数値を求めている。
    x = (2 - progress) * translateX;
    transform = 'translateX(' + x + 'px) ';
  }
  if (progress < 2) {
    boxContainer.style.transform = transform;
  } else {
    start = null;
  }
  rafId = window.requestAnimationFrame(animate);
}

右に動かすだけであれば、私もすぐに出来たのですが、
右に動かして、その後、左に動かしてを繰り返す実装方法が分からず
上記URLのコード例を見て、なるほどなーと感じさせて頂きました。

正直、アニメーションは難しいです。

余力がありましたら、こちらも参考になると思いますので、
時間がある時にでも読んでいただくと幸いです。
アニメーションの考え方が分かりやすく説明されています。
https://ics.media/entry/17183

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/02 11:44

    コードなど詳しく説明してくださりありがとうございました!
    とても助かりました!
    読み解いてみたのですが、なかなか、、アニメーションは難しいですね、、、
    勉強になりました。ありがとうございました!!

    キャンセル

+3

box.style.marginLeftを操作していいのであれば
それは「javascriptで完結」とはいえないのでは…

transition-durationをcssに入れて
それを上回る秒数でsetIntervalしてプロパティを反転すればいいと思います。
未検証です。

#rect {
    width: 100px;
    height: 30px;
    background: #00f;
    color: #fff;
    text-align: center;
    margin: 0 20px;
    /*↓これ*/
    transition-duration: 1s;
}
var box = document.getElementById("rect");

var ani = function(e){
  return function(){
    if (e.style.marginLeft=="20px")
      e.style.marginLeft="200px";
    else
      e.style.marginLeft="20px";
  }
}
// transition-duration以上の秒数でsetInterval
setInterval(ani(box), 2000);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/02 11:51

    完結と書いて誤解を生んでしまってすみません、、
    cssやhtmlの操作はよくてcssのanimateなどを使わずに実装できる方法を知りたいということでした。

    このような書き方があるんですね!!
    コードも短くて素晴らしいです!
    勉強になりました、ありがとうございました。

    キャンセル

checkベストアンサー

+2

流れ的にはこうするとわかりやすいかもしれません

window.addEventListener('DOMContentLoaded', function(e){
  var box = document.querySelector('#rect');
  var step=30;
  var span=10;
  var max_margin=100;
  var l_margin=0;
  var flg=false;
  var timerId=setInterval(function(){
    box.style.marginLeft = l_margin + "px";
    l_margin+=(flg?-1:1)*span;
    if(l_margin>=max_margin || l_margin<=0) flg=!flg;
    document.querySelector('#l_margin').textContent=l_margin;
  },step);
});
<div id="rect">box</div>
<div id="l_margin"></div>

 ローレベル版

<script>
window.onload=function(){
  var box = document.getElementById('rect');
  var step=30;
  var span=10;
  var max_margin=100;
  var l_margin=0;
  var flg=false;
  var timerId=setInterval(function(){
    box.style.marginLeft = l_margin + "px";
    l_margin+=(flg?-1:1)*span;
    if(l_margin>=max_margin || l_margin<=0) flg=!flg;
    document.getElementById('l_margin').innerHTML=l_margin;
  },step);
};
</script>

<div id="rect">box</div>
<div id="l_margin"></div>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/02 11:56

    なるほど!
    flagをたてて値の操作をすればよかったんですね。
    短い記述ですし、css3などを使わず古いブラウザなども対応できそうでとても素晴らしいです!
    とても勉強になりました。
    ありがとうございました!!

    キャンセル

  • 2018/05/02 12:09

    上記コード試して見ましたが動きませんでしたが・・・。

    キャンセル

  • 2018/05/02 12:45

    TO:easy_no_easyさん
    一通りのブラウザで試して動いているみたいなんですけど
    OSとブラウザの種類やバージョンはなんでしょう?

    キャンセル

  • 2018/05/02 16:33 編集

    TO:yambe.jp
    macOS sierra 10.12.6
    chrome 65.0.3325.18 です!

    キャンセル

  • 2018/05/02 16:46

    ローレベル版を追記しました
    時間があったら試してみて下さい

    キャンセル

+2

box.style.marginLeft のようにJavaScriptからCSSを指定していますが、現在は繰り返しくらいならCSSでもでき、それを利用したライブラリもあります。

【CSSアニメーション 入門 - Qiita】
https://qiita.com/soarflat/items/4a302e0cafa21477707f

【CSSアニメーションを簡単に実装できるライブラリ 10+ | NxWorld】
https://www.nxworld.net/services-resource/css-animation-libraries.html


「JavaScriptで完結させたい」場合はCanvasを利用することくらいしか思いつきませんでした。(それでもHTML要素を使用するので「JavaScriptで完結」とはいきませんが)

【Canvasアニメーションの要点 - Qiita】
https://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/02 11:50

    URLありがとうございます!
    完結と書いて誤解を生んでしまってすみません、、
    cssやhtmlの操作はよくてcssのanimateなどcss3を使わずに実装できる方法を知りたいということでした。
    助かりました、ありがとうございました!!

    キャンセル

+1

こんにちは!

左右に動くanimationを作成しました!
こちらでいかがでしょうか。
jsFiddle

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/02 12:00

    わざわざ実装してくださりありがとうございます!
    素晴らしいです。
    transitionを使うことでこんな短いコードで記述できるのですね!
    とても勉強になりました。
    ありがとうございました!

    キャンセル

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    ボタン早押しゲーム

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

  • 解決済

    JavaScriptを使ってツイッターに投稿したい

    5秒当てゲームのようなものをつくっています 自分のタイムをツイッターに投稿できるようにしたいのですが、ゲームの関数とツイートする関数が別なため、タイムをtwitTexを関数に

  • 解決済

    javascript ストップウォッチを作る

    前提・実現したいこと 現在ドットインストールを見ながらストップウォッチを作成中です。しかし、今までうまく動いていたのに、急にボタンを押してもストップウォッチのスタートボタンを押し

  • 解決済

    javascriptで作るストップウォッチ

    javascriptで動くストップウォッチを作ったのですが、STARTボタンを押してもスタートしません。 どこかにミスがあるはずなのですが、自力で見つけることができませんでした・

  • 受付中

    gif画像をスクロールで動作させる

    足跡が歩くgifアニメを作ったのですが、 それを指定の位置までスクロールしたら歩き始めるように 動作させたいです。 歩き終わったあとは、そのまま足跡が残るように表示させたいで

  • 解決済

    関数の定義と呼び出しの記述について

    実現したいこと スタートボタンを押すとpairsで定義した全ての枚数のカードが裏返しになる。 現状 スタートボタンを押しても何も変化なし。 ソースコード html <!

  • 解決済

    JQueryを使わず動きのある線を引く

     前提・実現したいこと JQueryを使わず動きのある線を引きたいです。 初心者なので初歩的なミスかと思いますが教えていただけますでしょうか。  発生している問題・エラーメッセ

  • 解決済

    jquery カウントダウンタイマー

    ネットで調べた以下のコードをカスタマイズしていますがうまく動かなくて困っています。 変更したい点は 指定した日時に向けてカウントダウンする ↓ ページにアクセスした時点から10

同じタグがついた質問を見る

  • JavaScript

    17009questions

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