This content originally appeared on DEV Community and was authored by Ustariz Enzo
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/Learntocreate/videos
See you soon!
Enzo.
This content originally appeared on DEV Community and was authored by Ustariz Enzo
Ustariz Enzo | Sciencx (2021-12-19T08:51:03+00:00) How to Create a Marquee in HTML/CSS!. Retrieved from https://www.scien.cx/2021/12/19/how-to-create-a-marquee-in-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.