<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);
});
This Pen doesn't use any external CSS resources.