<section class="marquees-wrapper">
<div class="extra-stuff">
<h1>marquee</h1>
<span>css only</span>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
<div class="marquee">
<ul class="marquee__content scroll">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
<!-- Mirrors the content above -->
<ul class="marquee__content scroll" aria-hidden="true">
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
<li>Lorem Ipsum is simply dummy text</li>
<li>·</li>
</ul>
</div>
</section>@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Oswald", sans-serif;
display: grid;
place-content: center;
background: #547663;
}
.marquees-wrapper {
--marquee-text-size: 4rem;
position: relative;
height: calc(8 * var(--marquee-text-size));
/* 8 line of text * font-size*/
width: 100%;
background-image: url("https://images.unsplash.com/photo-1673768501816-6a565f620309?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzYyMTMzMzM&ixlib=rb-4.0.3&q=80");
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.marquee {
--gap: 1rem;
display: flex;
gap: var(--gap);
overflow: hidden;
user-select: none;
color: #fff;
}
.marquee__content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
min-width: 100%;
gap: var(--gap);
}
.scroll {
animation: scroll 200s linear infinite;
}
/* styling design*/
.marquee__content li {
--text-color: rgba(255, 255, 255, 0.2);
list-style: none;
line-height: normal;
text-transform: uppercase;
font-size: var(--marquee-text-size);
font-weight: 900;
line-height: 1;
text-stroke: 2px var(--text-color);
-webkit-text-stroke: 2px var(--text-color);
color: transparent;
}
.marquee:nth-child(even) .scroll {
animation-direction: reverse;
}
/* ANIMATION */
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
/* Extra stuff */
.extra-stuff {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
z-index: 10;
border: 2px solid #fff;
padding: 5px;
max-width: 300px;
}
.extra-stuff h1 {
text-transform: uppercase;
font-size: 4rem;
line-height: 1.1;
text-align: center;
margin: 0;
}
.extra-stuff span {
text-transform: uppercase;
font-size: 2rem;
background-color: #fff;
width: 100%;
padding: 5px 0;
display: block;
text-align: center;
color: #000;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.