css - jQuery transform animate translation to pure JavaScript

Question

I am trying to use the following marquee code that I found on Stack-Overflow:

Javascript Marquee to replace <marquee> tags

The full source code example here:

https://www.sanwebcorner.com/2016/07/marquee-text-without-marquee-tag-using.html

I would like to convert the jQuery animate to pure JavaScript (I'm thinking JavaScript animate).

The jQuery code is as follows:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {

         $('.scrollingtext').bind('marquee', function() {
             var ob = $(this);
             var tw = ob.width();
             var ww = ob.parent().width();
             ob.css({ right: -tw });
             ob.animate({ right: ww }, 20000, 'linear', function() {
                 ob.trigger('marquee');
             });
         }).trigger('marquee');
     });
  </script>

  <div class="scroll">
    <div class="scrollingtext"> Flash message without marquee tag using javascript!</div>
  </div>

The marquee works quite well, but I am trying to avoid the overhead of jQuery and use pure JavaScript.

Answer 1

I struggled with this problem before I posted the question, and I continued to work on it after I posted. I in fact tried the eventual solution before, but incorrectly. My CSS is a little more general then the M. Lak (sanwebcorner.com) example. I want to be able to define multiple marquees with different widths.

<style type='text/css'>
.gc-marquee {
  min-height: 28px;
  overflow: hidden;
  position: relative;
}
.gc-marquee > .gc-scrollingtext {
  white-space: nowrap;
  position: absolute;
}
</style>

For rendering the marquee I wanted the duration/speed to be encoded, so I used a data attribute. The text can be any number of HTML tags.

  <div class="gc-marquee" id="marq-1" style="height: 80px;background-color: black;color: #dddddd;">
    <h3 class="gc-scrollingtext" data-millisec="16000" style="margin: 15px auto;font-weight: bold;">Short marquee text!</h3>
  </div>

Finally, the real problem is the JavaScript. I was confused by pure CSS marquees. I eventually understood the problem and got beyond the syntax.

<script>
  var marqueesToShowOnce = document.querySelectorAll( 'div.gc-marquee > .gc-scrollingtext' );
  function gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth ) {
    if( gc_marquee == undefined || gc_marquee == null || millisec < 1000 ) {
      console.log( `gc_marquee_loop: ERROR, ${millisec} ${txtWidth} ${parWidth}` );
      return;
    }
    setTimeout( function( ) {
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    }, millisec );
  }
  if( marqueesToShowOnce.length > 0 ) {
    Array.prototype.forEach.call(marqueesToShowOnce, function( gc_marquee ) {
      var millisec = parseInt( gc_marquee.dataset.millisec );
      var txtWidth = gc_marquee.offsetWidth;
      var parWidth = gc_marquee.parentElement.offsetWidth;
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    } );
  }
</script>

The marquee works quite well, and now I can avoid the overhead of jQuery and use pure JavaScript.