JavaScript : animation for a div

Question

I want to animate a div (say height 50 px and width 50 px) from left to right in the browser.

I can share my html css part here:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box{
        width:100px;
        height:100px;
        position: absolute;
    }
    .blue{
        background:#00f;
    }
    .position{
        margin-top: 50px;
    }
 </style>

</head>
<body>

<div class="box blue position" id="move_box"> </div>

<script>

</script>

</body>
</html>

How can I animate the div from left to right according to the condition "moves 10 pixels right and 10 pixels down per second"?

Note: only in JavaScript.

My script:

<script>
var box = document.getElementById('move_box'),
    boxPos = 0,
    boxLastPos = 0,
    boxVelocity = 0.01,
    limit = 300,
    lastFrameTimeMs = 0,
    maxFPS = 60,
    delta = 0,
    timestep = 1000 / 60,
    fps = 60,
    framesThisSecond = 0,
    lastFpsUpdate = 0,
    running = false,
    started = false,
    frameID = 0;

function update(delta) {
    boxLastPos = boxPos;
    boxPos += boxVelocity * delta;
    // Switch directions if we go too far
    if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity;
}

function draw(interp) {

    box.style.left = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';
    box.style.top = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';

    console.log(box.style.top);

}

function panic() {
    delta = 0;
}

function begin() {
}

function end(fps) {

    /*box.style.backgroundColor = 'blue';*/

}

function stop() {
    running = false;
    started = false;
    cancelAnimationFrame(frameID);
}

function start() {
    if (!started) {
        started = true;
        frameID = requestAnimationFrame(function(timestamp) {
            draw(1);
            running = true;
            lastFrameTimeMs = timestamp;
            lastFpsUpdate = timestamp;
            framesThisSecond = 0;
            frameID = requestAnimationFrame(mainLoop);
        });
    }
}

function mainLoop(timestamp) {
    // Throttle the frame rate.
    if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
        frameID = requestAnimationFrame(mainLoop);
        return;
    }
    delta += timestamp - lastFrameTimeMs;
    lastFrameTimeMs = timestamp;

    begin(timestamp, delta);

    if (timestamp > lastFpsUpdate + 1000) {
        fps = 0.25 * framesThisSecond + 0.75 * fps;

        lastFpsUpdate = timestamp;
        framesThisSecond = 0;
    }
    framesThisSecond++;

    var numUpdateSteps = 0;
    while (delta >= timestep) {
        update(timestep);
        delta -= timestep;
        if (++numUpdateSteps >= 240) {
            panic();
            break;
        }
    }

    draw(delta / timestep);

    end(fps);

    frameID = requestAnimationFrame(mainLoop);
}

start();
</script>

Have you tried anything yourself? Have you done any research? This problem has been solved many times. — Mike Cluck, Apr 17 '17 at 14:27
You can use `setInterval(1000, someFunction)` to call a function every second. Then you can modify an elements `left` and `top` position in JavaScript by adding `10` to each of them. — Spencer Wieczorek, Apr 17 '17 at 14:28
You can also use just CSS .... but seems like you haven't research anything — DaniP, Apr 17 '17 at 14:29
Or use a recursive callback in an animate function. Finding tutorials for this is not difficult. Stackoverflow is not a free code writing service — charlietfl, Apr 17 '17 at 14:29
This is an exact duplicate of your other question, [How to move a box 10 pixels right and 10 pixels down per second using JavaScript](https://stackoverflow.com/questions/43488936/how-to-move-a-box-10-pixels-right-and-10-pixels-down-per-second-using-javascript) — mkrieger1, Apr 12 '22 at 08:41

score 1 · Answer 1 · answered Apr 17 '17 at 14:32

Check that:

var i = 1;
var div = document.getElementById('move_box');

function myLoop() {
    setTimeout(function() {
        div.style.top = i * 10 + 'px'
        div.style.left = i * 10 + 'px'
        i++;
        if (i < 5) {
            myLoop();
        }
    }, 1000)
}

myLoop(); //  start the loop

.box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

.blue {
    background: #00f;
}

.position {
    margin-top: 50px;
}

<div class="box blue position" id="move_box"> </div>

JSFiddle

It looks nice .... how may I return back if it moved to end of the browser ? please add bit more script to return back to zero position. — Selim Reza, Apr 17 '17 at 14:37

JavaScript : animation for a div

1 Answers1