Proyecto moderno creado con Astro que implementa un carrusel de logos infinito y de alto rendimiento. Este componente utiliza exclusivamente CSS Moderno, eliminando la necesidad de bibliotecas de terceros o JavaScript pesado para las animaciones, logrando una estética Dark Mode sofisticada.
- Zero JavaScript Runtime: La animación se procesa íntegramente en la GPU, garantizando fluidez constante (60 FPS).
- Matemática Dinámica: Implementación de variables CSS (
--n,--i) para el cálculo automático de posiciones y delays. - Diseño Premium: Estética inspirada en plataformas SaaS modernas con máscaras de transparencia (
mask-image), tipografías itálicas y degradados metálicos. - Responsivo y Adaptable: Ajuste automático de dimensiones y velocidad mediante breakpoints de CSS.
- Arquitectura Limpia: Estructura semántica que delega la repetición lógica a Astro, manteniendo el código fuente organizado.
- Astro: Framework para la optimización de la estructura y entrega de componentes estáticos.
- CSS Moderno: Uso avanzado de
keyframes,transformy funcionescalc(). - Astro Components: Modularización para una fácil reutilización del slider.
src/pages/index.astro: Página principal que orquestra los datos (logos) y el layout.src/styles/carrusel.css: Archivo de estilos que contiene toda la lógica de la animación y el diseño visual.src/components/ItemCarrusel.astro: Componente atómico que recibe las props de imagen e índice dinámico.
Todos los comandos se ejecutan desde la raíz del proyecto usando npm:
| Comando | Acción |
|---|---|
npm install |
Instala las dependencias del proyecto. |
npm run dev |
Levanta el servidor local en http://localhost:4321. |
npm run build |
Genera la versión estática optimizada en dist/. |
- Gestionar Logos: Agrega o quita rutas en el array
imagesdeindex.astro. El sistema de Astro actualizará automáticamente la variable--n. - Ajustar Velocidad: Modifica la variable
--duren el archivo CSS para cambiar la rapidez del carrusel. - Estilo de Título: Edita el degradado dentro de
.header-content h2 spanpara adaptarlo a tu paleta de colores.
Desarrollado con ❤️ por isnaroa