Hay un desplazamiento horizontal no deseado en mi sitio web y no puedo entender por qué. Tengo un encabezado simple que usa display: flex , justify-content: center , marin-top: 5vh y un relleno en el logo y la hamburguesa. Más abajo tiene un título que sí translate-x: 1em to 0em al cargar por la derecha, un texto que hace lo mismo por la izquierda y una imagen que lo vuelve a hacer por la derecha. Captura de pantalla de mi página web
Código:
// Loading animation loading = document.querySelectorAll(".loading"); window.onload = function(element) { loading.forEach((link) => { link.classList.add("loaded"); }); }; .title { opacity: 0; transform: translateX(-2em); transition: transform 3s 0.5s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.5s ease-out; will-change: transform, opacity; } .title.loaded { opacity: 1; transform: translateX(0em); } .text { opacity: 0; transform: translateX(-4em); transition: transform 4s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.5s ease-out; will-change: transform, opacity; } .text.loaded { opacity: 1; transform: translateX(0); } .hero-image { opacity: 0; transform: translateX(1em); transition: transform 1s 0.5s cubic-bezier(0, 1, 0.3, 1), opacity 0.1s 0.5s ease-out; will-change: transform, opacity; } .hero-image.loaded { transform: translateX(0em); opacity: 1; } .mobile-hero { opacity: 0; transform: translateX(1em); transition: transform 1s 0.5s cubic-bezier(0, 1, 0.3, 1), opacity 0.1s 0.5s ease-out; will-change: transform, opacity; } .mobile-hero.loaded { transform: translateX(0); opacity: 1; } <div class="mobile"> <div> <h1 class="title loading">Michael Nussbaum</h1> <p class="text bottom loading">Zeit ist relativ, Zeit ist Geld</p> </div> <img src="img/daniel-portrait.png" class="mobile-hero loading" /> </div>No estoy completamente seguro de si esto es lo que busca, pero si desea detener el desbordamiento horizontal en una página, debería poder usar este código:
body { overflow-x: hidden; }No trabajo mucho con elementos animados, pero me imagino que translateX está causando el desplazamiento no deseado, que el desbordamiento-x debería ayudar. Espero que esto haya ayudado :)