JSFiddle - React, Tailwind, and code Playground

by Vinícius Moraes

HTML

<ul id="title">
    <li><a href="#">Puta que pariu!</a></li>
    <li><a href="#">Depois de um mês não é que eu consegui? </a></li>
    <li><a href="#">HAHAHAHA AHHAAHAHAHAHAH HAHAHAHAHAHAHAHA HUE HUE</a></li>
</ul>

CSS

#title { margin: 10px; }

#title li {
    width: 150px;
    overflow: hidden;
    font-family: sans-serif;
    display: block;
}

#title a {
    white-space: nowrap;
}

JavaScript

function startMarquee() {
    
    var menuItemWidth = $(this).width();
    var listItemWidth = $(this).parent().width();
    
    if(menuItemWidth > listItemWidth) {
        var scrollDistance = menuItemWidth - listItemWidth;
        var listItem = $(this).parent();

        listItem.stop();
        

        listItem.animate({scrollLeft: scrollDistance}, 1500, 'linear');
    }
}

function stopMarquee() {
    var listItem = $(this).parent();
    

    listItem.stop();
    

    listItem.animate({scrollLeft: 0}, 'medium', 'swing');
}


$('#title a').hover(startMarquee, stopMarquee);