ingrese la descripción de la imagen aquí Hola chicos, ¿saben por qué sucede esto? He establecido el ancho máximo al tamaño de la pantalla. También traté de llevar el control deslizante a un nuevo div, pero sigue funcionando como quiere. Estoy tratando de hacer un control deslizante infinito que va de izquierda a derecha y viceversa. Pero estoy atascado con este problema, el control deslizante va sobre el ancho de la página y crea más y más tamaño a la derecha. ¿Sabes si hay alguna manera de hacer esto de manera adecuada, o si de alguna manera puedo eliminar el texto por la forma en que desaparece de la pantalla? Gracias
.slide { margin-top: 25vw; margin-bottom: 12rem; animation: 10s slide; animation-iteration-count: infinite; animation-direction: alternate; color: transparent; -webkit-text-stroke: 2px #f1efd4; font-size: 8vw; white-space: nowrap; letter-spacing: 0.1em; word-spacing: 0.3em; } @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } <h3 class="slide" style="animation-direction: alternate-reverse; -webkit-text-stroke: 2px #424239;"> Sobre mi Sobre mi Sobre mi </h3>Simplemente use overflow-y: hidden si eso es lo que está tratando de lograr.
.slide { margin-top: 25vw; margin-bottom: 12rem; animation: 10s slide; animation-iteration-count: infinite; animation-direction: alternate; color: transparent; -webkit-text-stroke: 2px #f1efd4; font-size: 8vw; white-space: nowrap; letter-spacing: 0.1em; word-spacing: 0.3em; overflow-x: hidden; } @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } <h3 class="slide" style="animation-direction: alternate-reverse; -webkit-text-stroke: 2px #424239;"> Sobre mi Sobre mi Sobre mi </h3>Para lograr esto, tienes que ocultar el desbordamiento.
.slide { margin-top: 25vw; margin-bottom: 12rem; animation: 10s slide; animation-iteration-count: infinite; animation-direction: alternate; color: transparent; -webkit-text-stroke: 2px #f1efd4; font-size: 8vw; white-space: nowrap; letter-spacing: 0.1em; word-spacing: 0.3em; } body {overflow-x: hidden; /* overflow-y: hidden; uncomment if you dont want the other scrollbar */} @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } <h3 class="slide" style="animation-direction: alternate-reverse; -webkit-text-stroke: 2px #424239;"> Sobre mi Sobre mi Sobre mi </h3>Ocultar el desbordamiento en el cuerpo en lugar del texto evitará que se corte, por lo que no lo hice en el texto. También puede descomentar el / overflow-y: hidden; / parte si desea que no haya barras de desplazamiento.