estoy haciendo una pagina responsive y quiero que un texto tenga una animación que recorre de izquierda a derecha, pero requiero que si el usuario hace la pantalla mas pequeña se recorra el texto con la pantalla, como dejando siempre un margen, pero no se como hacerle, ya intente ponerle % donde me agrega los pixeles pero se sigue quedando en su posicion.
Alguien tendrá alguna idea de como puedo hacer esto?
window.onload = function() {
var pos = 0;
var box = document.getElementById('box');
var t = setInterval(move, 35);
function move() {
if(pos >= 75) {
clearInterval(t);
}
else{
pos += 1;
box.style.left = pos+'%';
}
}
}
#container{
width: 100%;
height: 50px;
background: lime;
position: relative;
border-radius: 28px;
box-shadow: 3px 5px 13px rgba(0, 0, 0, 0.4);
}
#box{
display: flex;
align-items: center;
justify-content: center;
width: 105px;
height: 50px;
margin-right: 9;
background: transparent;
border: 1px solid red;
color: #fff;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="only screen and (max-width: 767px)" href="estilos.css">
<title>Proyecto JavaScript</title>
</head>
<body>
<div id="container">
<div id="box">$99,999,999.99</div>
</div>
</body>
<script src="main.js"></script>
</html>