JSFiddle - React, Tailwind, and code Playground

by rob_teamworks

HTML

<div class = "ticker-container">
	<div class = "ticker-text">
        start text text text text text text text text text text text text text text text text text text text text text text text text end
	</div>
	<div class = "ticker-text">
        Again
	</div>  
</div>

CSS

.ticker-container {
	width: 100%;
	height: 2.9%;
	border: 1px solid;
	overflow: hidden;
}
.ticker-text {
	height: 150%;
    white-space:nowrap;
    display:inline-block;
}

JavaScript

var width = $('.ticker-text').width(),
    containerwidth = $('.ticker-container').width(),
    left = containerwidth;
$(document).ready(function(e){
	function tick() {
        if(--left < -width){
            left = containerwidth;
        }
        $(".ticker-text").css("margin-left", left + "px");
        setTimeout(tick, 16);
      }
      tick();
});