JSFiddle - React, Tailwind, and code Playground

by r3pek

HTML

<div class="fap_news">
</div>

CSS

.fap_news {
    border-top: 1px solid;
    border-bottom: 1px solid;
    background: rgba(80, 80, 80, 0.20);
    padding: 5px;
    height: 20px;
}

.fap_news_wrap {
    position:absolute; 
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fap_news > p {
    position: absolute;
    margin: auto;
    overflow: hidden;
    height: 20px;
    white-space: nowrap;
}

JavaScript

$.fn.hMarquee = function() {
    // Wrap div in a custom class to prevent horizontal scroll bars from appearing
    $(this).wrap('<div class="fap_news_wrap" />');
    
    // Position each element inside the div
    var elemLeft = ($(this).width() / 4) + parseInt($(this).css('padding-left'), 10);
    var totalWidth = 0;
    $(this).find('p').each(function() {
        $(this).css('left', elemLeft + 'px');
        totalWidth += $(this).width() + 50;
        elemLeft += $(this).width() + 50;
    });
    
    // define animation function
    function fAnimation(elem) {
        var thisLeft = parseInt(elem.css('left'), 10);
        
        if (thisLeft <= - $(elem).width()) {
            thisLeft = totalWidth - $(elem).width() + (thisLeft + $(elem).width()) + 50;
            elem.css('left', thisLeft + 'px');
        }
        
        elem.animate({left: thisLeft - 100}, 1500, 'linear', function() {
            fAnimation($(this));
        });
    };
    
    // Stop when the mouse is hovering an item
    $(this).mouseenter(function () {
        $(this).find('p').each(function() {
            $(this).stop(true);
        });
    });
    $(this).mouseleave(function () {
        $(this).find('p').each(function() {
            fAnimation($(this));
        });
    });

    // start the animation
    $(this).find('p').each(function() {
            fAnimation($(this));
    });
}

function load_fap_news(elem) {
    var numArticles = 5;
    
    function success(data, textStatus, jqXHR) {
        $.each(data.noticias, function(i, item) {
            $(elem).append('<p>' +
                           '<img src="http://www.emfa.pt/www/conteudos/galeria/emblemas/imagens-menu/fap_tb_160x127.tb" height="20" align="top"/>' +
                           '<a href="' + item.URL +'" target="_blank">' +
                           '<b>[' + item.DTA_PUBLICA.substring(0, item.DTA_PUBLICA.indexOf(' ')) + ']</b> ' + 
                            item.TITULO_PT + 
                           ...