JSFiddle - React, Tailwind, and code Playground

by tickietick

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="container">
  <marquee class="headline-marquee" behavior="slide" direction="down" scrollamount="15" style="height:50px;">
    <a href="http://google.com" class="headline">Your downward scroller text goes here</a>
  </marquee>
  <marquee class="headline-marquee" behavior="slide" direction="down" scrollamount="15" style="height:50px;">
    <a href="http://google.com" class="headline">Scrolling through second</a>
  </marquee>
  <marquee class="headline-marquee" behavior="slide" direction="down" scrollamount="15" style="height:50px;">
    <a href="http://google.com" class="headline">Last scrollie throughie</a>
  </marquee>
</div>

CSS

a.headline {
  text-decoration: none;
  color: SlateBlue;
  font-family: "Arial";
}

JavaScript

$(function() {
		var allMods = $(".headline-marquee");
		console.log(allMods.length);
    var headlineTxt = $("#" + allMods.get(1).id);
    console.log(headlineTxt);
    /*
    $(".scroll-line").each(function(i, obj) {
        var txt = $("#" + obj.id);
        console.log(i + ": " + obj.id);

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

                    break;
                case 2: // delay before scroll back
                
                    break;
                case 3: // scroll out
                
                    break;
            }
        }).trigger("scroll");
    });
    */
});