Sobre nosotros

/* ========================================= CONTENEDOR ========================================= */ .mc-gallery { position: relative; width: 100%; height: 600px; overflow: hidden; border-radius: 8px; } /* ========================================= SLIDES ========================================= */ .mc-slide { position: absolute; inset: 0; opacity: 0; overflow: hidden; /* * La transición entre una imagen * y la siguiente. */ transition: opacity 1.2s ease-in-out; /* * Optimización para el navegador. */ will-change: opacity; } /* Imagen actualmente visible */ .mc-slide.mc-active { opacity: 1; } /* ========================================= IMÁGENES ========================================= */ .mc-slide img { position: absolute; inset: -5%; width: 110%; height: 110%; max-width: none; object-fit: cover; will-change: transform; } /* ========================================= ZOOM IN ========================================= */ .mc-slide.mc-zoom-in img { animation: mcZoomIn 5s ease-in-out forwards; } @keyframes mcZoomIn { from { transform: scale(1); } to { transform: scale(1.08); } } /* ========================================= ZOOM OUT ========================================= */ .mc-slide.mc-zoom-out img { animation: mcZoomOut 5s ease-in-out forwards; } @keyframes mcZoomOut { from { transform: scale(1.08); } to { transform: scale(1); } } /* ========================================= ACCESIBILIDAD ========================================= */ @media (prefers-reduced-motion: reduce) { .mc-slide { transition: opacity 0.3s linear; } .mc-slide img { animation: none !important; transform: scale(1) !important; } } (function () { /* * ======================================= * CONFIGURACIÓN * ======================================= */ const DISPLAY_TIME = 5000; const ZOOM_AMOUNT = 1.08; /* * Buscar todas las galerías. * * Esto permite que el código siga * funcionando incluso si Elementor * vuelve a cargar el widget. */ function initializeGalleries() { const galleries = document.querySelectorAll(".mc-gallery"); galleries.forEach(function (gallery) { /* * Evitar inicializar dos veces */ if (gallery.dataset.initialized === "true") { return; } gallery.dataset.initialized = "true"; const slides = Array.from( gallery.querySelectorAll(".mc-slide") ); if (slides.length === 0) { return; } let currentIndex = 0; /* * ======================================= * REINICIAR ANIMACIÓN * ======================================= */ function startZoom(slide, index) { const image = slide.querySelector("img"); if (!image) { return; } /* * Quitamos animación anterior. */ image.style.animation = "none"; /* * Estado inicial. * * Pares → Zoom IN * Impares → Zoom OUT */ if (index % 2 === 0) { image.style.transform = "scale(1)"; } else { image.style.transform = `scale(${ZOOM_AMOUNT})`; } /* * Forzar reflow. * * Esto permite reiniciar la * animación cuando volvamos * a la misma imagen. */ void image.offsetWidth; /* * Aplicar animación. */ if (index % 2 === 0) { image.style.animation = `mcZoomIn ${DISPLAY_TIME}ms ease-in-out forwards`; } else { image.style.animation = `mcZoomOut ${DISPLAY_TIME}ms ease-in-out forwards`; } } /* * ======================================= * MOSTRAR PRIMERA IMAGEN * ======================================= */ slides.forEach(function (slide) { slide.classList.remove( "mc-active", "mc-zoom-in", "mc-zoom-out" ); }); slides[0].classList.add("mc-active"); startZoom( slides[0], 0 ); /* * ======================================= * CAMBIAR IMAGEN * ======================================= */ function nextSlide() { const currentSlide = slides[currentIndex]; const nextIndex = (currentIndex + 1) % slides.length; const nextSlide = slides[nextIndex]; /* * Primero iniciamos el zoom * de la siguiente imagen. */ startZoom( nextSlide, nextIndex ); /* * Mostrar siguiente. * * En este momento ambas imágenes * están superpuestas. */ nextSlide.classList.add( "mc-active" ); /* * Quitar la anterior. * * Como opacity tiene transition, * obtenemos el crossfade. */ requestAnimationFrame(function () { currentSlide.classList.remove( "mc-active" ); }); currentIndex = nextIndex; } /* * ======================================= * CICLO AUTOMÁTICO * ======================================= */ setInterval( nextSlide, DISPLAY_TIME ); }); } /* * Elementor / página normal */ if (document.readyState === "loading") { document.addEventListener( "DOMContentLoaded", initializeGalleries ); } else { initializeGalleries(); } })();