Estoy tratando de usar el siguiente código de marquesina que encontré en Stack-Overflow:
Javascript Marquee para reemplazar las etiquetas <marquee>
El ejemplo de código fuente completo aquí:
https://www.sanwebcorner.com/2016/07/marquee-text-sin-marquee-tag-using.html
Me gustaría convertir jQuery animate a JavaScript puro (estoy pensando en JavaScript animate).
El código jQuery es el siguiente:
<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>La marquesina funciona bastante bien, pero estoy tratando de evitar la sobrecarga de jQuery y uso JavaScript puro.
Luché con este problema antes de publicar la pregunta y continué trabajando en él después de publicarla. De hecho, probé la solución final antes, pero incorrectamente. Mi CSS es un poco más general que el ejemplo de M. Lak (sanwebcorner.com). Quiero poder definir múltiples marquesinas con diferentes anchos.
<style type='text/css'> .gc-marquee { min-height: 28px; overflow: hidden; position: relative; } .gc-marquee > .gc-scrollingtext { white-space: nowrap; position: absolute; } </style>Para renderizar la marquesina, quería codificar la duración/velocidad, así que usé un atributo de datos. El texto puede ser cualquier número de etiquetas HTML.
<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>Finalmente, el verdadero problema es el JavaScript. Estaba confundido por las marquesinas CSS puras. Eventualmente entendí el problema y fui más allá de la sintaxis.
<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>La marquesina funciona bastante bien y ahora puedo evitar la sobrecarga de jQuery y usar JavaScript puro.