Creating the Classic Marquee Effect Without The Marquee Tag
Tags: html, css
Published: 2020-06-25 14:51:12

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.
```CSS
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
```
Add the below styles to the div with the class of `marquee`.
```CSS
.marquee{
  width: 80%;
  background: violet;
  text-transform: uppercase;
}
```
Now, style the `div` that contains your line of text.
```CSS
.marquee div{
  font-size: 3rem;
  font-family: verdana;
}
```
So far this is what we have.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1oi0eu9zrekadpuws3bn.jpg)

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`.
```CSS
.marquee{
  ...
  ...
  white-space: nowrap;
}
``` 
Now, its time to create our animation rule. We'll name it `animate`.
```CSS
@keyframes animate{
  100%{
    transform: translate(-100%, 0);
  }
}
```
Add it to our child `div` that contains the line of text.
```CSS
.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.)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zj3uta4obusx8mf4749c.gif)

To solve this, add the below 2 lines of CSS to the `div` that contains the line of text.
```CSS
.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`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vbhtv2nzy5te2pc3lyxv.gif)

Below is the final code.
##HTML
```HTML
  <div class="marquee">
    <div>A Million Reasons To Love Web Development</div>
  </div>
```
##CSS
```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.
```CSS
.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.