DEV Community

Cover image for How to Create a Marquee in HTML/CSS!
Ustariz Enzo
Ustariz Enzo

Posted on Edited on

How to Create a Marquee in HTML/CSS!

#html #css #tutorial

Hey fellow creators

Learn how to create a marquee in HTML/CSS only in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Create a basic HTML structure with a container and then a "p" with some text inside:

<div class="marquee-container">
    <p class="marquee">
        LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME
    </p>
</div>
Enter fullscreen mode Exit fullscreen mode

2. Style the page.

Start by styling the container by making sure its overflow is hidden:

.marquee-container{
    display: flex;
    align-items: center;
    background: #25284c;
    overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Then style the text however you want, but most importantly create an animation:

.marquee{
    font-size: 100px;
    line-height: 1.3;
    font-family: sans-serif;
    padding: 24px 0;
    color: #fff;
    white-space: nowrap;
    animation: marquee 3.5s infinite linear; /* notice the infinite */
}
Enter fullscreen mode Exit fullscreen mode

Add a pseudo element ::after with the exact same text as the one in the "p" :

.marquee:after{
    content: "LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME";
}
Enter fullscreen mode Exit fullscreen mode

3. Create the animation.

Now create the animation itself:

@keyframes marquee{
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}
Enter fullscreen mode Exit fullscreen mode

It will make the div containing the text go to the left, you can put 50% if you want to animate it to the right.

After 50% of the width it will reset to the beginning of the animation without a flinch, thus starting the animation again and again.

This, indeed, can only work if we are using the same text in the p tag and the after.

There you go, you've now created a nice smooth marquee!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Top comments (6)

Collapse
 
ksengine profile image
Kavindu Santhusa •

This is HTML only version

<marquee>
      LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME
</marquee>
Enter fullscreen mode Exit fullscreen mode

This tag is deprecated.

Collapse
 
ziratsu profile image
Ustariz Enzo •

Unfortunately yes, it is not recommanded anymore but thanks for the comment mate!

Collapse
 
ksengine profile image
Kavindu Santhusa •

this is an awesome animation created with marquee tag

Collapse
 
bogdanbatsenko profile image
bogdanbatsenko •

I was looking for this the other day. Thanx

Collapse
 
luizc91 profile image
LuizC91 •

Is marquee still worth putting in a site? The teacher from the online course said it's a thing that depreciates the job.

Collapse
 
ziratsu profile image
Ustariz Enzo •

Don't use the deprecated tag, just do as I show in the article and it's all right.