Infinite moving text with scrolling

user_14888661 0
Viewed 241

I want make a moving infinite text like this text(We are trusted by over 28,000...) in this link . I already tried something but I have not reached exactly what I want. It is close but not infinite.

<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);
})
css html javascript
1 Answers

As you can see in the following screenshots this is not infinite either:

first row with "We are trusted by over 28,000..." and second row

It's just that on normal screen you can't reach the end of the element.

You can accomplish something similar by adding an listener on scroll and transforming the element you want to be moved retative to window.pageYOffset value.

Something like:

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>

Please note that this is a draft. You might want to play with sizes and speed of transform or other attributes.

Please note that for this example the container has max-width: 100vw; and overflow: hidden (so it won't display a scrollbar for the element that is bigger than the screen), and the element itself has white-space: nowrap;

user_64296740
Related