JSFiddle - React, Tailwind, and code Playground

Scroll 0001

by Dave

HTML

______________________<div class="main_tic_div" style="width:100px"><div class="inner_tic_div">6 ticker</div></div><br>
________________<div class="main_tic_div" style="width:200px"><div class="inner_tic_div">9 ticker tape</div></div><br>
___________________<div class="main_tic_div" style="width:150px"><div class="inner_tic_div">12 ticker tape</div></div><br>
__________<div class="main_tic_div" style="width:300px"><div class="inner_tic_div">15 ticker tape me and dont rain on my parade. </div></div><br>
_________________________<div class="main_tic_div" style="width:50px"><div class="inner_tic_div">18 tick me dude.</div></div><br>
<!---->

CSS

.main_tic_div {
position:relative;
display:inline-block;
overflow: hidden;/**/
border:1px solid #a0a0a0;
}
.inner_tic_div {
position:absolute;
display:inline-block;
left:100%;/**/
font-family: Arial;
font-size: 24px;
white-space:nowrap;
}

JavaScript

var itdh = $('.inner_tic_div').outerHeight();
$('.main_tic_div').css("height", itdh);
$('.inner_tic_div').each(function go_tic(){
var itdw = $(this).width();
var mtdw = $(this).parent().width();
var itds = (mtdw * 3000) / 125 + (itdw * 30);
//var itdsb = itdw * 30;
//var itds = itdsa + itdsb;
//var itdd = -mtdw+mtdw-itdw;
$(this).animate({left:-mtdw+mtdw-itdw},itds, 'linear').animate({left:mtdw},1,go_tic);
});