Infinite Marquee using just HTML and CSS.
Yashraj Vaghela
Posted on April 4, 2023
HTML
<div class="marquee-horizontal2">
<div class="track-horizontal2">
<div class="marquee-text">Marquee</div>
<div class="marquee-text">Marquee</div>
<div class="marquee-text">Marquee</div>
<div class="marquee-text">Marquee</div>
<div class="marquee-text">Marquee</div>
<div class="marquee-text">Marquee</div>
</div>
</div>
CSS
.marquee-horizontal2 {
display: flex;
overflow: hidden;
width: 100%;
white-space: nowrap;
justify-content: flex-start;
-webkit-box-align: center;
align-items: center;
}
.track-horizontal2 {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
will-change: transform;
animation: marquee-horizontal 20s linear infinite;
}
.marquee-text {
-webkit-text-size-adjust: 100%;
-webkit-box-direction: normal;
white-space: nowrap;
box-sizing: border-box;
padding-right: 0.3em;
padding-left: 0.3em;
-webkit-box-flex: 0;
flex: 0 0 auto;
font-family: 'Helvetica', sans-serif;
color: #1d4130;
font-size: 6.25em;
font-weight: 700;
text-transform: uppercase;
}
@keyframes marquee-horizontal {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
π πͺ π
π©
Yashraj Vaghela
Posted on April 4, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.