Move an element back and forth diagonally using Java Script

user_11731440 0
Viewed 586

I'm trying to make my div element move back and forth inside a container infinitely. The goal is to use Java Script only, no CSS animations, jQuery, etc.

const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;

function move() {
    box.style.left = pos + 'px';
    box.style.top = pos + 'px';
    pos++;
    if (pos === 150) {
        clearInterval(t)
    }


}
#container{
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
}

#box{
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <link href="animation.css" rel="stylesheet">
    <script defer src="animation.js"></script>
</head>
<body>
<div id="container">
    <div id="box"></div>
</div>

</body>
</html>

So here the code. As you see, I've used position relative/absolute to make the element move with setInterval function. But when I try to reverse it back to "it's corner", it just won't work. To be honest, I've tried some stuff already, but I really can't find the solution of doing it without using any other instruments. Thanks in advance.

css html javascript
2 Answers

You need to increase/decrease the values considering a boolean variable like below:

const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
let test = true;

function move() {
  box.style.left = pos + 'px';
  box.style.top = pos + 'px';
  
  if (test)
    pos++; /* move down */
  else
    pos--; /* move up */
    
  /* update the direction when you reach the top or bottom limit*/  
  if (pos >= 150) 
    test = false 
  else if (pos <= 0) 
    test = true;
}
#container {
  width: 200px;
  height: 200px;
  background-color: green;
  position: relative;
}

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}
<div id="container">
  <div id="box"></div>
</div>

user_86203330

An alternative to get the same results

const box = document.getElementById('box');
let jump = 1;
let pos = 0;
window.setInterval(() => {
  pos = pos + jump;
  if (pos > 150 || pos < 0) {
    jump = jump * (-1);
  }
  box.style.left = pos + 'px';
  box.style.top = pos + 'px';
}, 1);
#container{
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
}

#box{
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <link href="animation.css" rel="stylesheet">
    <script defer src="animation.js"></script>
</head>
<body>
<div id="container">
    <div id="box"></div>
</div>

</body>
</html>

user_136986250
Related