X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

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

The <marquee> tag is not in use anymore. It is an old and non-standard HTML element, which 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 have the marquee effect find some alternative ways of doing it below with CSS, JavaScript and jQuery.

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

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 set 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 will look like from right to left scrolling text:

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <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 the marquee tag.</p>
    </div>
  </body>
</html>

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 this:

Example

<!DOCTYPE html>
<html>
  <title>Title of the document</title>
  <head>
    <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 the 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

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

<!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 100%);
      }
      .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 for having the result 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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div class="marquee">Some text goes here.</div>
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.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: 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>

Do you find this helpful?

Related articles