Configuración JSON
{
"logos": [
{
"src": "https://placehold.co/200x100/e2e8f0/64748b?text=Logo+1",
"alt": "Logo 1"
},
{
"src": "https://placehold.co/200x100/e2e8f0/64748b?text=Logo+2",
"alt": "Logo 2"
},
{
"src": "https://placehold.co/200x100/e2e8f0/64748b?text=Logo+3",
"alt": "Logo 3"
},
{
"src": "https://placehold.co/200x100/e2e8f0/64748b?text=Logo+4",
"alt": "Logo 4"
},
{
"src": "https://placehold.co/200x100/e2e8f0/64748b?text=Logo+5",
"alt": "Logo 5"
},
{
"src": "https://placehold.co/200x100/e2e8f0/64748b?text=Logo+6",
"alt": "Logo 6"
}
]
}Carrusel Logos 01
CarruselLogos01.vueCarrusel de logos con desplazamiento automático infinito. Soporta modo continuo (marquee CSS) y paso a paso. Incluye fade en bordes, escala de grises, control de opacidad, pausa al hover y diseño completamente responsive con breakpoint configurable.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
logos | LogoItem[] | [] | Array de logos con src, alt y link opcionales. |
mode | 'continuous' | 'step' | 'continuous' | Modo de animación: continuo (marquee) o paso a paso. |
direction | 'ltr' | 'rtl' | 'rtl' | Dirección del desplazamiento. |
speed | number | 150 | Velocidad en px por segundo (modo continuo). |
stepInterval | number | 3000 | Intervalo entre pasos en ms (modo step). |
stepTransitionDuration | number | 500 | Duración de la transición de cada paso en ms. |
logoWidth | string | '8rem' | Ancho de cada logo. |
logoHeight | string | '4rem' | Alto de cada logo. |
gap | string | '2rem' | Espacio entre logos. |
logoWidthMobile | string | '6rem' | Ancho de cada logo en móvil. |
logoHeightMobile | string | '3rem' | Alto de cada logo en móvil. |
breakpoint | string | '48rem' | Breakpoint para cambiar a tamaño móvil. |
objectFit | 'contain' | 'cover' | 'fill' | 'none' | 'contain' | CSS object-fit de las imágenes. |
objectPosition | string | 'center' | CSS object-position de las imágenes. |
opacity | number | 1 | Opacidad base de los logos (0-1). |
hoverOpacity | number | 1 | Opacidad al hacer hover sobre un logo (0-1). |
grayscale | boolean | false | Aplica filtro de escala de grises a los logos. |
pauseOnHover | boolean | true | Pausa la animación al pasar el ratón. |
fade | boolean | true | Activa gradiente de desvanecimiento en los bordes. |
fadeWidth | string | '4rem' | Ancho del gradiente de fade en cada borde. |
Interfaz LogoItem
interface LogoItem {
src: string // URL de la imagen del logo
alt?: string // Texto alternativo (accesibilidad)
link?: string // URL de enlace al hacer clic en el logo
}Notas
- El componente duplica el array de logos internamente para crear el efecto de loop infinito.
- En modo continuo, la animación usa CSS @keyframes con translateX para máximo rendimiento (GPU-accelerated).
- En modo paso a paso, cada stepInterval ms se desplaza el ancho de un logo usando CSS transition.
- La velocidad se define en px/s (no rem), ya que la velocidad perceptual es absoluta.
- Si el array de logos está vacío, el componente no renderiza nada.
- Soporta prefers-reduced-motion: pausa automáticamente la animación.
- El fade en los bordes usa CSS mask-image con gradiente lineal.
- Completamente responsive: los tamaños de logo cambian según el breakpoint configurado.
Ejemplo de uso
<CarruselLogos01
:logos="[
{ src: '/logos/acme.svg', alt: 'Acme Corp' },
{ src: '/logos/globex.svg', alt: 'Globex', link: 'https://globex.com' },
{ src: '/logos/stark.svg', alt: 'Stark Industries' },
]"
mode="continuous"
direction="rtl"
:speed="50"
:pause-on-hover="true"
:fade="true"
fade-width="4rem"
:grayscale="true"
:opacity="0.6"
:hover-opacity="1"
/>