A marquee displays scrolling text to highlight important information on a webpage.
<div class="c-marquee">
<div class="c-marquee__content scroll">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="c-marquee__content scroll" aria-hidden="true">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
<div class="c-marquee">
<div class="c-marquee__content scroll-reverse">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="c-marquee__content scroll-reverse" aria-hidden="true">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
.c-marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: 1rem;
}
.c-marquee__content {
font-size: 90px;
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: 1rem;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 1rem));
}
}
.scroll {
animation: scroll 20s linear infinite;
}
.scroll-reverse {
animation: scroll 20s linear infinite reverse;
}
.c-marquee {
display: flex;
overflow: hidden;
user-select: none;
gap: 1rem;
&__content {
font-size: 90px;
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: 1rem;
}
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 1rem));
}
}
.scroll {
animation: scroll 20s linear infinite;
}
.scroll-reverse {
animation: scroll 20s linear infinite reverse;
}