Example of the text scrolling plugin with jQuery | CSS | JavaScript | jQuery

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src= "https://code.jquery.com/jquery-3.5.0.min.js"> </script>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  </head>
  <body>
    <div class="marquee">Some text goes here.</div>
    <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: 1000
            , //'left', 'right', 'up' or 'down'
            direction: 'left'
            , //true or false - should the marquee be duplicated to show an effect of continues flow
            duplicated: false
            , //speed in milliseconds of the marquee in milliseconds
            duration: 5000
            , //gap in pixels between the tickers
            gap: 20
            , //on cycle pause the marquee
            pauseOnCycle: false
            , //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
            pauseOnHover: false
            , //the marquee is visible initially positioned next to the border towards it will be moving
            startVisible: false
          });
      });
    </script>
  </body>
</html>