JSFiddle - React, Tailwind, and code Playground

by thir13enth

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="news-ticker-body">
        <div class="news-ticker-display"><!--
            --><ul><!--
                --><li class="news-text">News 1: 11 12 13 14 15</li><!--
                --><li class="news-text">|News 2: 6 7 8 9 10</li><!--
                --><li class="news-text">News 3: Lorem ipsum dolor sit amet, te sed dolor inermis. Eum ad probo postulant mnesarchum, imperdiet comprehensam an mei. Ut meis maiorum sed.</li><!--
                --><li class="news-text">News 4: 16 17 18 19 20</li><!--
                --><li class="news-text">News 5: <a href="http://google.com">GoogleGoogleGoogle</a></li><!--
            --></ul><!--
        --></div>
    </div>

CSS

.news-ticker-body
{
    float: left;
    height: 100%;
    border: 2px solid #26343f;
    position: relative;
}

.news-ticker-body
{
    background: White;
    width: 610px;
    border-left: 0;
    border-right: 0;
}

.news-ticker-display
{
    white-space: nowrap;
    display: inline-block;
}

.news-ticker-display ul
{
    margin: 0;
    padding: 0;
}

.news-ticker-display ul li
{
    display: inline-block;
}

.news-text
{
    border: 1px solid Red;
}

JavaScript

var leftMargin, scrollSpeed;
var playScroll = true;

scrollSpeed = 50;
leftMargin = 0;

function autoPlay() {
    if (playScroll) {
        $('.news-ticker-display').animate({ marginLeft: --leftMargin }, scrollSpeed, "linear", function () {
            if (leftMargin < -$('.news-ticker-display li:first').width() - 2) {
                $('.news-ticker-display li:first').clone().appendTo('.news-ticker-display ul');
                leftMargin = leftMargin + $('.news-ticker-display li:first').width() - 2;
                $('.news-ticker-display li:first').remove();
            }
            autoPlay();
        });
    }
}

autoPlay();