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="headline-container">
    <div id="headline-list" class="headline">
        <div class="headline-line">
          <a href="google.com">This is a simple text to test custom marquee</a>
        </div>
        <div class="headline-line">
          <a href="google.com">Next Text</a>
        </div>
        <div class="headline-line">
          <a href="google.com">Last Headline</a>
        </div>
    </div>
</div>

CSS

#headline-container
{
    display: inline-block;
    background-color: #cccccc;
    width: 500px;
    height: 30px;
    overflow: hidden;
}
.headline
{
    border-color: black;
    border: 0px solid black;;
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
.headline-line {
  height: 20px;
  padding: 5px;
}
.headline-line a{
  font-size: 20px;
  text-decoration: none;
  font-family: "Arial";
  color: SlateBlue;
}

JavaScript

jQuery(document).ready(function($) {
				console.log("starting headlines...");
				headlines();
			});
			
			  function headlines() {
				
          var el = $("#headline-list");
          var total = $(".headline-line").length;
          
          console.log("total: " + total);
          console.log("el height: " + el.height());

					var count = 0;
          var ycord = -el.height();
          el.css({top: ycord});
        	el.fadeOut(0);
          
					var lineHeight = el.height()/(total);
				
          function loop_step1() {
            if(count >= total) {
              console.log("reset top...");
            	count = 0;
              ycord = -el.height();
              el.css({top: ycord});
            }    		
            console.log("count: " + count);
            console.log("step 1");
            
            ycord += lineHeight;

            el.animate ({
              top: ycord,
            }, 0, "linear");

            el.fadeIn(2000, function() { loop_step2();});
          }
					
          // Pause
          function loop_step2() {
            console.log("step 2");
            count += 1;
            
            window.setTimeout(function() {
              fadeOut(2000);}, 2000);

          }
					
          // Fade Out
          function fadeOut(time) {
          	console.log("step 3");
            el.fadeOut(time, function() {loop_step1();});
          }

          loop_step1();
        }