For the dark times when <marquee>
would stop working.
Keep in mind that the .marquee-copy
element needs to have the exact same content as .marquee
You can customize the css variables for further control (i marked then in CSS)
you can set the timing function to steps(80)
or other amount for a more authentic look.
<div class="marquee-container">
<div class="marquee">
this is a marquee
</div>
<div aria-hidden="true" class="marquee marquee-copy">
this is a marquee
</div>
</div>
/* marquee in css by scarecat */
@keyframes marquee {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.marquee-container {
overflow: hidden;
display: grid;
width: 100%;
align-items: center;
grid-template-areas: "center";
--speed-to-loop: 10s;
--timing-function: linear;
--gap: 10px;
}
.marquee {
animation: marquee var(--speed-to-loop) var(--timing-function) infinite;
width: max-content;
min-width: 100%;
flex-grow: 0;
flex-shrink: 0;
grid-area: center;
padding-right: var(--gap);
}
.marquee-copy {
animation-delay: calc(var(--speed-to-loop) / -2);
}