JSFiddle - React, Tailwind, and code Playground
by LuckyCat
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>
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, 1);
}
tick();
});