Creating the Classic Marquee Effect Without The Marquee Tag

Remember those good old days when you visited your favourite website and came across a line of text or probably a row of images that entered the screen from the right and moved out of your view to the left? And, when you hovered over it, it paused. That was pretty cool, right?

As a developer, you most likely have been tempted to create the same effect at least once. But, then you knew it wouldn't be wise to use the classic marquee tag anymore, now that it's deprecated. Of course, you probably got it done in the end using a few CSS properties.

I personally had a hard time getting the effect right, when I first tried it. I used the text-indent property, and sometimes the left and the right properties. But, using transform made the task quite simple.

So, in this short post, let's have a look at how we can achieve the popular classic marquee effect using just a few lines of HTML and CSS.

For the markup, all we need is just 2 divs. Give the parent div a class of marquee, and the child div will contain the line of text that you want to be displayed.

 HTML
<div class="marquee">
  <div>A Million Reasons To Love Web Development</div>
</div>

Now, let's add the CSS. First, let's vertically and horizontally center the text by adding a few Flexbox properties to the body.

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Add the below styles to the div with the class of marquee.

.marquee{
  width: 80%;
  background: violet;
  text-transform: uppercase;
}

Now, style the div that contains your line of text.

.marquee div{
  font-size: 3rem;
  font-family: verdana;
}

So far this is what we have.

Notice, that the text wraps and moves to the next line. To avoid this, add the white-space property to the marquee div and set its value to nowrap.

.marquee{
  ...
  ...
  white-space: nowrap;
}

Now, its time to create our animation rule. We'll name it animate.

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

Add it to our child div that contains the line of text.

.marquee div{
  ...
  ...
  animation: animate 5s linear infinite;
}

But, we are facing 2 problems. First, the animation is not starting from the left as we want it to. Second, notice that the animation breaks and restarts. (Also, ignore the overflowing text. We'll work on it later.)

To solve this, add the below 2 lines of CSS to the div that contains the line of text.

.marquee div{
  ...
  ...
  padding-left: 100%;
  display: inline-block;
}

The animation may now seem a bit fast. Slow it down by increasing the animation duration from 5s to 10s. And of course, set the overflow to hidden for the div with the class of marquee.

Below is the final code.

HTML

  <div class="marquee">
    <div>A Million Reasons To Love Web Development</div>
  </div>

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee {
  width: 80%;
  background: violet;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.marquee div {
  font-size: 3rem;
  font-family: verdana;
  padding-left: 100%;
  display: inline-block;
  animation: animate 10s linear infinite;
}

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

If you wish to pause the animation when one hovers over it, simply add the below style for the hover state.

.marquee:hover div{
  animation-play-state: paused;
}

So, that was a short tutorial on how to create a marquee effect without using the marquee tag. Hope you like it.