How to Add the Marquee Effect without Using the Marquee Tag (with CSS, JavaScript and jQuery)

  1. Make the marquee effect with CSS animations (vertically and horizontally)
  2. Make the marquee effect with JavaScript.
  3. Make the text scrolling plugin with jQuery
  4. Related Resources

The <marquee> tag is not in use anymore. It is an old and non-standard HTML element that was used to make the text or image to scroll up, down, left or right on the web page automatically.

Nowadays, people don't like using it at all. It is considered that there is no need and no benefit to having continually scrolling text. No one would like to read the text, which doesn't stay quiet.

However, if you need to add the marquee effect find some alternative ways of doing it below with CSS, JavaScript and jQuery.

Make the marquee effect with CSS animations (vertically and horizontally)

Use the CSS animation, transform properties with the @keyframes at-rule to have the marquee effect without using the <marquee> tag.

For horizontally scrolling the text, use the "marquee 10s linear infinite;" value for the animation property (change the seconds according to your needs). Then, define the animation to move it:

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

Now, let’s see how the scrolling of a text will look from right to left.

Example of creating a horizontally scrolling text without the <marquee> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #1c87c9;
        color: #fff;
        padding: 5px;
      }
      p {
        -moz-animation: marquee 10s linear infinite;
        -webkit-animation: marquee 10s linear infinite;
        animation: marquee 10s linear infinite;
      }
      @-moz-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @-webkit-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @keyframes marquee {
        0% {
          -moz-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          transform: translateX(100%)
        }
        100% {
          -moz-transform: translateX(-100%);
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <p>This is a horizontally scrolling text without a marquee tag.</p>
    </div>
  </body>
</html>

Result

This is a horizontally scrolling text without a marquee tag.

Then, let’s make the text scroll vertically. This time we need to change the values of the transform property like this:

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}

Our bottom to top scrolling text will be like the following.

Example of creating a vertically scrolling text without the <marquee> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #1c87c9;
        color: #fff;
        text-align: center;
      }
      p {
        padding-top: 100%;
        -moz-animation: marquee 5s linear infinite;
        -webkit-animation: marquee 5s linear infinite;
        animation: marquee 5s linear infinite;
      }
      @-moz-keyframes marquee {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(0, -100%);
        }
      }
      @-webkit-keyframes marquee {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(0, -100%);
        }
      }
      @keyframes marquee {
        0% {
          -moz-transform: translate(0, 0);
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
        }
        100% {
          -moz-transform: translate(0, -100%);
          -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <p>This is a vertically scrolling text without a marquee tag.</p>
    </div>
  </body>
</html>

You can use the :hover selector with the animation-play-state property to stop the scrolling of the text when hovered. Set the "paused" value for the animation-play-state .

:hover {
  animation-play-state: paused;
}

Example of creating a horizontally scrolling text with a hovering effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .marquee {
        margin: 0 auto;
        width: 600px;
        height: 30px;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
      }
      .marquee:before,
      .marquee:after {
        position: absolute;
        top: 0;
        width: 50px;
        height: 30px;
        content: "";
        z-index: 1;
      }
      .marquee:before {
        left: 0;
        background: linear-gradient(to right, #ccc 10%, transparent 80%);
      }
      .marquee:after {
        right: 0;
        background: linear-gradient(to left, #ccc 10%, transparent 80%);
      }
      .marquee__content {
        width: 300%;
        display: flex;
        line-height: 30px;
        animation: marquee 10s linear infinite forwards;
      }
      .marquee__content:hover {
        animation-play-state: paused;
      }
      .list-inline {
        display: flex;
        justify-content: space-around;
        width: 33.33%;
        /* reset list */
        list-style: none;
        padding: 0;
        margin: 0;
      }
      @keyframes marquee {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-66.6%);
        }
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="marquee__content">
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Make the marquee effect with JavaScript.

Here vanilla JS is used.

Example of creating a marquee effect with JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-family: sans-serif;
        font-weight: 700;
        height: 600vh;
        background: #d66d75;
        background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 50%);
      }
      .marquee {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
      }
      .marquee .inner {
        position: relative;
        width: 100%;
        display: flex;
        color: white;
        font-size: 8rem;
      }
      .marquee .inner > * {
        white-space: nowrap;
        padding: 0 4rem;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="inner">
        <p>Hello world of humans.</p>
      </div>
    </div>
    <script>
      function handleMarquee() {
        const marquee = document.querySelectorAll('.marquee');
        let speed = 4;
        let lastScrollPos = 0;
        let timer;
        marquee.forEach(function(el) {
          const container = el.querySelector('.inner');
          const content = el.querySelector('.inner > *');
          //Get total width
          const elWidth = content.offsetWidth;
          //Duplicate content
          let clone = content.cloneNode(true);
          container.appendChild(clone);
          let progress = 1;
          function loop() {
            progress = progress - speed;
            if(progress <= elWidth * -1) {
              progress = 0;
            }
            container.style.transform = 'translateX(' + progress + 'px)';
            container.style.transform += 'skewX(' + speed * 0.4 + 'deg)';
            window.requestAnimationFrame(loop);
          }
          loop();
        });
        window.addEventListener('scroll', function() {
          const maxScrollValue = 12;
          const newScrollPos = window.scrollY;
          let scrollValue = newScrollPos - lastScrollPos;
          if(scrollValue > maxScrollValue) scrollValue = maxScrollValue;
          else if(scrollValue < -maxScrollValue) scrollValue = -maxScrollValue;
          speed = scrollValue;
          clearTimeout(timer);
          timer = setTimeout(handleSpeedClear, 10);
        });
        function handleSpeedClear() {
          speed = 4;
        }
      };
      handleMarquee();
    </script>
  </body>
</html>

Make the text scrolling plugin with jQuery

Using jQuery is another alternative way of having the effect of a marquee. Let’s learn how to use it step by step.

  1. Include jQuery library and Marquee.js in your header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
  1. Include jQuery easing plugin for easing options:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  1. Write the Markup:
<div class="marquee">Some text goes here.</div>
  1. Call the plugin: 
<script>
  $(function(){
    $('.marquee').marquee();		
  });
</script>
  1. Define these options if you want to rewrite the default functionalities:
$(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
  
  });
});

Now let’s see how it will look like.

Example of creating a text scrolling plugin with jQuery:

<!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>