Voy a intentar crear código para representar dos marquees, por lo que primero detallaremos el código del primero:
Primer marquee
<div class="marquee">
<div class="marquee__group">
<span>hello there ➺</span>
<span>hello there ➺</span>
<span>hello there ➺</span>
</div>
<div class="marquee__group" aria-hidden="true">
<span>hello there ➺</span>
<span>hello there ➺</span>
<span>hello there ➺</span>
</div>
</div>
.marquee {
display: flex;
overflow: hidden;
height: 10vh;
user-select: none;
gap: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
/*background-color: green;*/
/*transform: skewY(-3deg); */
/*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/
}
.marquee:hover {
-webkit-text-stroke: 1.5px #fff;
text-stroke: 1.5px #fff;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
transition: all 0.5s ease;
-webkit-font-smoothing: antialiased;
/*-moz-osx-font-smoothing: grayscale;*/
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
min-width: 100%;
animation: scroll 15s linear infinite reverse;
}
.marquee__group span {
color: white;
font-size: 5vw;
font-weight: 800;
white-space: nowrap;
font-family: 'Syne', sans-serif !important;
/*text-transform: uppercase;*/
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 2rem));
}
}
@media only screen and (min-width: 360px) {
.marquee__group span {
font-size: 6.5vw;
}
}
A continuación detallamos el html y el CSS del segundo Marquee
Segundo marquee
<div class="marquee__three marquee--hover-pause">
<div class="marquee__group__three">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='' data-lazy-src="add your own link"><noscript><img src='add your own link' alt=''></noscript>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='' data-lazy-src="add your own link"><noscript><img src='add your own link' alt=''></noscript>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='' data-lazy-src="add your own link"><noscript><img src='add your own link' alt=''></noscript>
</div>
<div aria-hidden="true" class="marquee__group__three">
<div class="marquee__group__three">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='' data-lazy-src="add your own link"><noscript><img src='add your own link' alt=''></noscript>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='' data-lazy-src="add your own link"><noscript><img src='add your own link' alt=''></noscript>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt='' data-lazy-src="add your own link"><noscript><img src='add your own link' alt=''></noscript>
</div>
</div>
</div>
.marquee__three {
display: flex;
overflow: hidden;
height: 68vh;
user-select: none;
gap: .1rem;
padding-top: 2rem;
padding-bottom: 2rem;
/*transform: rotate(-5deg) translateY(-100px) translateX(50px);*/
/*animation: scroll 18s linear infinite;*/
/*background-color: green;*/
/*transform: skewY(-8deg); */
/*-webkit-mask-image:radial-gradient(rgba(0, 0, 0,1) 15%, transparent 68%);*/
/*mask-image: linear-gradient(transparent, black 10%, black 70%, transparent 100%);*/
}
.marquee--hover-pause:hover .marquee__group__three {
animation-play-state: paused;
}
.marquee__group__three {
flex-shrink: 0;
display: flex;
align-items: center;
/*justify-content: space-between;*/
gap: .1rem;
min-width: 100%;
animation: scroll 30s linear infinite reverse;
}
.marquee__group__three img:hover {
transition: all 0.5s ease-in-out;
/*transform: skewY(-8deg);*/
transform: scale(1.1);
background-color: #c1532f;
object-fit: cover;
aspect-ratio: 1;
border-radius: 50%;
will-change: transform;
margin-top: 1rem;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - .1rem));
}
}
