<div class="scrolling-text">
  Scrolling Text Scrolling Text Scrolling Text 
</div>

<div class="author"><a href="https://www.psd-dude.com/scrolling-text/">Scrolling text</a> by PSDDude
<br/>
<a href="https://www.coding-dude.com/wp/css/scrolling-text-using-html/">Scrolling Text Using HTML</a> by CodingDude
</div>
:root{
  display:flex;
  flex-direction:column;
  align-content:center;
  justify-content:center;
  height:100dvh;
  background:black;
  font-family:sans-serif;
  color:white;
}

.scrolling-text {
    width: 30vw; 
    white-space: nowrap; 
    overflow: hidden;
    box-sizing: border-box;
    font-size:clamp(16px,50dvh,220px);
    white-space:nowrap;
    margin: 0 auto;
  }


.author{
  position:fixed;
  bottom:1em;
  right:1em;
  font-size:clamp(16px,4dvh,32px);
  color:white;  
}

.author a{
  color:#afa;
  font-weight:bold;
}
  $(document).ready(
    function loop() {
      $('.scrolling-text').css({scrollLeft:0});
      $('.scrolling-text').animate({ scrollLeft: "+=1000" }, 10000, 'linear', loop);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.6.0.min.js