Hola, estoy tratando de implementar un efecto de marquesina sin fisuras. Aquí está el ejemplo que estoy tratando de lograr. https://dentripelantwerpen.cargo.site/
Hasta ahora tengo esto:
<div class="inner-content"> <div class="outer-div"> <div class="inner-container"> <h1> DEN TRIPEL<br></h1> </div> <div class="inner-container2"> <h1> DEN TRIPEL<br></h1> </div> </div> </div>y este es mi css
.inner-content { width:100%; height:100vh; } .outer-div { width:100%; overflow:hidden; } .inner-container { animation: marquee 10s linear infinite; } .inner-container2 { animation: marquee2 10s linear infinite; animation-delay: 5s; } @keyframes marquee { from {transform: translateX(100%); } to {transform: translateX(-100%); } @keyframes marquee2 { from {transform: translateX(0%); } to {transform: translateX(-200%); }Probé muchos enfoques que encontré en la web. Y llegué a la conclusión de que tengo que usar divs que se transformarán dentro y fuera de la ventana gráfica. Pero de alguna manera solo se muestra uno de ellos. Me encantaría tener una animación tan suave como en el ejemplo vinculado en la parte superior. ¿Alguien tiene una idea sobre cómo resolver esto.
EDITAR: me retracto de mi respuesta. Regresé y miré y está torcido. Volveré si tengo la oportunidad.
Podrás obtener lo que quieras sin js. Eliminé un montón de lo que sentí que era html innecesario.
Debido a que estás animando dos cosas que necesitan respetar la posición de la otra, lo que hice fue posicionarlas absolutamente y tus cosas funcionaron bien. Agregué algunas cosas para mostrar los dos elementos diferentes y mi bucle está un poco apagado (tengo que correr por cuestiones de trabajo). Echa un vistazo a la pluma para ver lo que quiero decir. Tendrá que modificar las cosas y hacer un mejor trabajo visualmente, pero la función está ahí. Estabas muy cerca.
h1 { animation: marquee 10s linear infinite; position: absolute; font-size: 100px; width: 650px; border: 1px solid red; } .first { color: green } .second { left: 900px; color: blue }