Código para Marquee Infinito

Detalle del código para conseguir un marquee infinito de estos que están tan de moda en la web, pero sin utlilizar los marcadores html de "marquee" Pienso emplear este código en lichimochi.com

Contenido

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));
  }
}
				
			
Scroll al inicio