HTML5 Marque

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

Very nice :slight_smile: