Бесконечная анимация js

Question

Всем привет. Начал изучать Js DOM и вот наткнулся на задачу: "Создать анимацию на js, которая толкает блок вправо и когда доходит до конца страницы (блока) постепенно появляется с начала страницы и по новой

var pos = 0;
var box = document.getElementById("box");
var t = setInterval(move, 10);

function move() {
  if (pos >= 150) {
    clearInterval(t)
  } else {
    pos += 1;
    box.style.left = pos + "px";
  }
}

#container {
  width: 200px;
  height: 200px;
  margin: 0;
  background-color: cornflowerblue;
}

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

<div id="container">
  <div id="box"></div>
</div>

В этом коде блок едет вправо и останавливается на 150, а как сделать чтобы блок, когда доедет до конца страницы постепенно появлялся в начале?

Answer 1

Из одного DOM элемента можно сделать только так:

requestAnimationFrame(draw);
  
function draw(t) {
  box.style.left = `${(t/10)%450-50}px`;
  requestAnimationFrame(draw);
}

#container {
  width: 400px;
  height: 100px;
  background-color: cornflowerblue;
  position: absolute;
  overflow: hidden;
}

#box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

<div id="container">
  <div id="box"></div>
</div>

БЛОГ НА HUSL

Бесконечная анимация js

Ответы (1 шт):