JSFiddle - React, Tailwind, and code Playground

by tickietick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="container">
<div id ="MarqueeDiv" class=marquee >

    <div id="mytext" class="scroll-line">
        <a href="google.com">This is a simple text to test custom marquee</a>
    </div>
    <div id="mytext1" class="scroll-line">
        <a href="google.com">Next Text</a>
    </div>
    <div id="mytext2" class="scroll-line">
        <a href="google.com">Last Headline</a>
    </div>
</div>

</div>

CSS

#container
{
    /*display: inline-block;
    background-color: #cccccc;
    width: 300px;
    height: 100px;
    overflow: hidden;*/
        width: 18em;
    height: 8em;
    margin: 1em auto;
    overflow: hidden;
    background: #cccccc;
    position: relative;
    box-sizing: border-box;
}
.scroll-line
{
    /*display: inline-block;
    position: relative;
    white-space: nowrap;*/
}

.marquee {
    top: 1em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { top:   8em }
    50%  { top: 4em }
    100% { top: -11em }
}

JavaScript

/*$(function() {

    var activeElement = 0;
    
    $(".scroll-line").each(function(i, obj) {
        var txt = $("#" + obj.id);
        console.log(i + ": " + obj.id);

        txt.bind("scroll" + i, function () {
            var el = $(this);
             
            if(i == activeElement) {
            		// Scroll state machine
                var scrollState = el.data("scrollState") || 0;
                el.data("scrollState", (scrollState + 1) % 4);
                switch (scrollState) {
                    case 0: // initial scroll                   

                        el.animate({ top: 0 }, 1000, "linear", function() {
                          el.trigger("scroll" + i);
                        });
                        break;

                    case 1: // pause
                        window.setTimeout(function () {
                            el.trigger("scroll" + i);
                        }, 2000);

                        break;
                    case 2: // scroll off

                        var height_off = el.parent().height();
                        el.animate({ top: height_off }, 2000, "linear", function() {
                          el.trigger("scroll" + i);
                        });
                        break;

                    case 3: // pause
                    		var height_reset = 0 - el.height();
                        el.css({ top: height_reset });
                        
                        el.trigger("scroll" + i);
                        break;
                }
            }
                
        }).trigger("scroll" + i);
    });
    
    
});*/