Vertical Marquee Text
A feature list scrolls upward without end inside a short window, fading in at the bottom and out at the top. The same two-copy trick as a horizontal marquee, turned on its side.
Also known as: vertical scrolling text css, vertical ticker, scrolling list animation.
- Unlimited projects
- Custom domains
- Team roles
- Daily backups
- Priority support
HTML
<div class="txt-vertical-marquee">
<ul class="txt-vertical-marquee-group">
<li>Unlimited projects</li><li>Custom domains</li><li>Team roles</li><li>Daily backups</li><li>Priority support</li>
</ul>
<ul class="txt-vertical-marquee-group" aria-hidden="true">
<li>Unlimited projects</li><li>Custom domains</li><li>Team roles</li><li>Daily backups</li><li>Priority support</li>
</ul>
</div>CSS
.txt-vertical-marquee {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 0.8);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: flex;
flex-direction: column;
height: 5.2em;
overflow: hidden;
-webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);}
.txt-vertical-marquee-group {
flex-shrink: 0;
margin: 0;
padding: 0;
list-style: none;
animation: txt-vertical-marquee-up 9s linear infinite;
}
.txt-vertical-marquee-group li {
display: flex;
align-items: center;
gap: 0.5em;
height: 1.75em;
font-weight: 600;
white-space: nowrap;
}
.txt-vertical-marquee-group li::before {
content: "✓";
display: grid;
place-items: center;
width: 1.35em;
height: 1.35em;
border-radius: 50%;
font-size: 0.75em;
color: #fff;
background: var(--c);
}
@keyframes txt-vertical-marquee-up {
to { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.txt-vertical-marquee, .txt-vertical-marquee *, .txt-vertical-marquee::before, .txt-vertical-marquee::after, .txt-vertical-marquee *::before, .txt-vertical-marquee *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.