JSFiddle - React, Tailwind, and code Playground

by qolami

HTML

<div class="newsticker"> 
    </div>

CSS

* {
    padding: 0;
    margin: 0;
}
div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
    position: relative;
    overflow: hidden;
}

.newsticker p {
    padding-left:10px;
    padding-right:10px;
    position:absolute;
    width: inherit;
}

JavaScript

var newsticker = $('.newsticker'),
    maxHeight = newsticker.height();

function transition() {
    newsticker.find('p').animate({
        marginLeft : "400px",
        opacity : ".0"
    }, 600).fadeOut(100);
    
    newsticker.append(
        $('<p>').css({
            'margin-left' : '400px',
            'opacity'     : '0'
        }).text('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit nihil voluptatibus maxime sit quam delectus eaque officiis cumque accusamus velit nesciunt deserunt veniam molestias alias? Eaque iste quia non.')
    ).find('p').each(function() {
        if ($(this).css('top') == 'auto')
        $(this).css('top',
            (maxHeight - $(this).height()) / 2
        );
    });
    
    newsticker.find('p').animate({"marginLeft":"0px","opacity":"1"}, 600);
}

setInterval(transition, 2000);