Agreguemos el efecto de Marquee en logos:
El resultado:
Iniciamos agregando en nuestro style.css los siguiente estilos:
.marquee-logos {
--marquee-speed: 50s;
--marquee-speed-mobile: 25s;
}
.marquee-logos .gallery {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.marquee-logos .gallery-item {
padding: 0 70px;
}
.marquee-logos .elementor-image-gallery {
width: fit-content;
align-items: center;
display: flex;
will-change: transform;
animation: marquee var(--marquee-speed) linear infinite;
}
.marquee-logos .gallery img {
width: auto;
max-width: fit-content;
}
@keyframes marquee {
100% {
transform: translate3d(-50%,0,0);
}
}
@media screen and (max-width: 768px) {
.marquee-logos .gallery-item {
padding: 0 30px;
}
.marquee-logos .elementor-image-gallery {
animation: marquee var(--marquee-speed-mobile) linear infinite;
}
}
En JS:
function cloneMarqueeGallery() {
const wrapper = document.querySelector('.marquee-logos .elementor-image-gallery')
if(!wrapper) {
return;
}
const gallery = wrapper.querySelector('.gallery');
const galleryCloned = gallery.cloneNode(true);
wrapper.appendChild(galleryCloned);
}
