JSFiddle - React, Tailwind, and code Playground
HTML
<div id="cont">
<div class="entry">
<div class="t_time">16:40</div>
<div class="t_label>Some text</div>
</div>
<div class="entry">
<div class="t_time">16:40</div>
<div class="t_label>Some text</div>
</div>
<div class="entry">
<div class="t_time">16:40</div>
<div class="t_label>Some text</div>
</div>
<div class="entry">
<div class="t_time">16:40</div>
<div class="t_label>Some text</div>
</div>
</div>
CSS
*{
/* Disables the scrollbar for all elements */
overflow:hidden;
}
#cont{
/* Sets the position to be independent and absolute */
position:absolute;
}
JavaScript
function scrollUp(){
// Get the window's height
var windowHeight = $(window).height();
// Get a handle on the container
var cont = $('#cont');
// Get the container's height
var contHeight = cont.height();
// Set the container to be below the viewport
cont.css({top:windowHeight});
// Animate the container to move up over 15 seconds, then restart the animation
cont.animate({top:'-=' + (windowHeight + contHeight)}, 15000, scrollUp);
}
// Set the marquee in motion
scrollUp();