JSFiddle - React, Tailwind, and code Playground

by Krzysztof

HTML

<div class="upcoming-element">
    <p>Upcoming:</p>
    <div class="marqueeable">
        <h3>Watch this new video! Watch this new video! Watch this new video!</h3>
    </div>
</div>

<button id="scroll">scroll</button>
<!-- Used to measure width of h3 title -->
<h3 class="measure"></h3>

CSS

body {
    background-color: #F00;
}
p, h3 {
    margin: 2px;
}
p {
    display: inline-block;
    margin-left: 12px;
}
h3 {
    padding-left: 12px;
    white-space: nowrap;
}
h3.measure {
    display: none;
    padding: 0 10px;
}
.upcoming-element {
    width: 450px;
    position: relative;
    background-color: #00CCFF;
    margin-bottom: 25px;
    opacity: 0.75;
}
.marqueeable {
    overflow-x: hidden;
    width: 450px;
    position: relative;
    opacity: 0.75;
}
.marqueeable.mask {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 150px);
}

JavaScript

var scrollHandler = function (evt) {
    $('.measure').text($('.marqueeable > h3').text());

    var marqueeSpeed = 55; // px per s
    var marqueeWidth = $('.measure').outerWidth() - $('.marqueeable').width();
    var marqueeDuration = Math.round(marqueeWidth / marqueeSpeed * 1000);
    
    if (marqueeWidth > 0) {
        $('.marqueeable h3').animate({
            "margin-left": "-=" + marqueeWidth
        }, marqueeDuration, function () {
            $('.marqueeable h3').css('margin-left', 0);
        });
    }
}


$('#scroll').on('click', scrollHandler);