JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="ticker-container">
<div class="ticker-text">
<p>hello, world!!;fuck the world;fuck everything</p>
</div>
</div>
CSS
.ticker-container {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.ticker-text {
color: #fafafa;
white-space:nowrap;
display:inline-block;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
.ticker-text p{
font-family: 'Roboto Mono', monospace;
padding: 0;
margin: 0;
font-size: 40px;
color: #ffb200;
font-weight: 700;
}
JavaScript
const
$text = $('.ticker-text'),
words = $text.find('p').text().split(';');
let
currWord = -1,
width, containerwidth, left;
function nextText() {
currWord = (currWord + 1) % words.length;
$text.find('p').text(words[currWord]);
left = containerwidth = $('.ticker-container').width();
width = $text.width();
}
function tick() {
if ((left -= 3) < -width) {
nextText();
}
$text.css('margin-left', `${left}px`);
setTimeout(tick, 10);
}
nextText();
tick();