DEV Community 👩‍💻👨‍💻

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

Posted on • Updated on

How to Create a Marquee in HTML/CSS!

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.

Create an Account!
Now it's your turn!
 
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.