0

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>

1 respuesta 1

0

window.innerWidth te da el ancho de la pantalla del navegador. Si quieres saber el ancho de un elemento, obtienes el elemento con elemento = document.getElementById("id") y luego el elemento.clientWidth

1
  • Gracias, lo voy a intentar! Saludos.
    – tryPlease
    Commented el 30 may. 2022 a las 15:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.