Along with several other things HTML5 depreciated the marquee tag and did not replace it with any thing easy… I tried several solutions I found on the web, this one was the only one that worked liked the marquee tag. I have tweaked the settings, It runs some what fast because on mobile devices it crawls very slowly compared to a computer browser. This works on any modern browser, so far the only browser that won’t show it was internet explorer on an XP system at work.
this goes in your head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script/jquery.marquee.js"></script>
<script src="scripts/jquery.marquee.min.js"></script>
<script src="scripts/jquery.easing.min.js"></script>
<script src="scripts/jquery.pause.min.js"></script>
<script>
$(function(){
$('.marquee').marquee({
//If you wish to always animate using jQuery
allowCss3Support: true,
//works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear',
//requires jQuery easing plugin. Default is 'linear'
easing: 'linear',
//pause time before the next animation turn in milliseconds
delayBeforeStart: 0,
//'left', 'right', 'up' or 'down'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true,
//SPEED In Milliseconds Of The Marquee In Milliseconds
duration: 20000,
//gap in pixels between the tickers
gap: 10,
//on cycle pause the marquee
pauseOnCycle: false,
//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: true,
//the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false,
});
});
</script>
in the body
<div class="marquee" style="width: 90%; margin-left: auto; margin-right: auto; overflow: hidden;">
content...
</div>
original code came from herehttps://www.jqueryscript.net/animation/Text-Scrolling-Plugin-for-jQuery-Marquee.html
easing.min.js]https://gist.github.com/gesheo/6194940[url] easing.min.js
https://github.com/tobia/Pause[/url] pause.min.js
you can see it in action at https://weather.scottsworld.info/index.html