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>
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;
}
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 */
}
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";
}
3. Create the animation.
Now create the animation itself:
@keyframes marquee{
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
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)
This is HTML only version
This tag is deprecated.
Unfortunately yes, it is not recommanded anymore but thanks for the comment mate!
this is an awesome animation created with
marquee
tagI was looking for this the other day. Thanx
Is marquee still worth putting in a site? The teacher from the online course said it's a thing that depreciates the job.
Don't use the deprecated tag, just do as I show in the article and it's all right.