Quiero hacer un texto infinito en movimiento como este texto (más de 28,000 personas confían en nosotros...) en este enlace . Ya probé algo pero no he llegado exactamente a lo que quiero. Es cercano pero no infinito.
<h1 class="deneme display-1 " id="movingtext">We are trusted by over 28,000 clients to power stunning websites.We are trusted by over 28,000 clients to power stunning websites.</h1> window.addEventListener('scroll', () => { var elemen = document.getElementById("movingtext"); elemen.style = "left:-450px" var rect = elemen.getBoundingClientRect(); var rect1 = rect.left; var scrolled = window.scrollY; var deg = (rect1 + scrolled) / 1.8; elemen.style = "left:" + deg + "px"; console.log(rect.left, rect.right); })Como puedes ver en las siguientes capturas de pantalla esto tampoco es infinito:
primera fila con "Más de 28 000 personas confían en nosotros..." y segunda fila
Es solo que en la pantalla normal no puedes llegar al final del elemento.
Puede lograr algo similar agregando un oyente en el desplazamiento y transformando el elemento que desea mover en relación con el valor window.pageYOffset .
Algo como:
window.addEventListener('scroll', () => { const movingtext = document.getElementById("movingtext"); const scrolled = window.pageYOffset; //feel free to play with this value to change the speed of the transform ( the `* 3` part) const left = scrolled * 3; movingtext.style.transform = `translate3d(-${left}px, 0px, 0px)`; }) .wrapper { height: 300vh; padding-top: 100vh; max-width: 100vw; overflow: hidden; } .infinite-text { display: inline-block; overflow: hidden; white-space: nowrap; } <div class="wrapper"> <h1 class="infinite-text" id="movingtext">We are trusted by over 28,000 clients to power stunning websites.We are trusted by over 28,000 clients to power stunning websites.</h1> </div>Tenga en cuenta que esto es un borrador. Es posible que desee jugar con los tamaños y la velocidad de transformación u otros atributos.
Tenga en cuenta que, para este ejemplo, el contenedor tiene max-width: 100vw; y overflow: hidden (por lo que no mostrará una barra de desplazamiento para el elemento que es más grande que la pantalla), y el elemento en sí tiene white-space: nowrap;