--- title: "Marquesina" type: component version: "2.2.5" doc_version: "2.7.22" status: stable date: 2026-07-13 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Pure CSS Tailwind CSS Marquee con desplazamiento infinito, pausa al pasar el mouse, dirección inversa y soporte vertical. No se requiere JavaScript." url: https://frutjam.com/es/components/marquee --- # Marquesina Los componentes de marquesina crean tiras de contenido infinitas y de desplazamiento continuo, ideales para logotipos de marcas, pancartas publicitarias, testimonios o nubes de etiquetas. Construida completamente con animaciones CSS, la marquesina Frutjam admite direcciones horizontales y verticales, pausa al pasar el mouse, reproducción reversible y control de velocidad. Duplique el elemento `marquee-track` (con `aria-hidden`) para obtener un bucle fluido y sin espacios. Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila. | Clase | Tipo | Descripción | | ---------------- | ----------- | -------------------------------------------------------------------------------------------- | | marquee | Base | Contenedor exterior: los clips se desbordan y contienen variables de animación | | marquee-track | Modificador | Fila interior de desplazamiento; duplicar con `aria-hidden` para un bucle sin interrupciones | | marquee-pause | Modificador | Pausa la animación al pasar el mouse | | marquee-reverse | Modificador | Se desplaza en la dirección opuesta | | marquee-vertical | Modificador | Se desplaza de arriba a abajo en lugar de de izquierda a derecha | | marquee-slow | Speed | Desplazamiento lento (ciclo de 40 segundos) | | marquee-normal | Speed | Velocidad predeterminada (ciclo de 20 s) | | marquee-fast | Speed | Desplazamiento rápido (ciclo de 10 segundos) | | marquee-fade | Modificador | Agrega bordes degradados en ambos lados | ## Uso básico Agregue dos elementos `marquee-track` idénticos: el segundo (con `aria-hidden="true"`) llena el espacio cuando el primero se desplaza fuera de la pantalla. ## Pausa al pasar el mouse Agregue `marquee-pause` para detener la animación cuando el usuario pasa el cursor sobre la tira. ```html
Hover me to pause the scroll Animation stops here
``` ## Dirección inversa Utilice `marquee-reverse` para desplazarse de derecha a izquierda en lugar de de izquierda a derecha. Combina dos filas para obtener un efecto de capas. ```html
Alpha Beta Gamma Delta Epsilon
Alpha Beta Gamma Delta Epsilon
``` ## Variantes de velocidad ```html
Slow Slow Slow Slow Slow
Normal Normal Normal Normal Normal
Fast Fast Fast Fast Fast
``` ## Carpa vertical Agregue `marquee-vertical` y déle al contenedor una altura fija para un desplazamiento de arriba a abajo. ```html
Announcement one
Announcement two
Announcement three
Announcement four
Announcement five
``` ## Etiquetas de tecnología Un patrón común para mostrar un conjunto de habilidades o un conjunto de tecnologías. ```html
HTML CSS JavaScript TypeScript React Vue Tailwind CSS Node.js
``` ## Brecha personalizada Anule `--marquee--gap` o `--marquee--duration` con una utilidad en línea para ajustar el espaciado y la velocidad. ```html
Wide gap Wide gap Wide gap Wide gap
``` ## Bordes desvanecidos Agregue `marquee-fade` para desvanecer ambos extremos de la tira en el fondo de la página para una apariencia pulida. ```html
Design Development Performance Accessibility Open Source Security Testing
``` ## Banner de anuncio Una barra de teletipo delgada para promociones o avisos en todo el sitio. Combine `marquee-fade` y `marquee-pause` para obtener la mejor experiencia. ```html
🎉 Version 2.0 is here — explore what's new 🌿 Built with Tailwind CSS v4 ⚡ Zero JavaScript, pure CSS components 🎨 Fully themeable with CSS variables
``` ## Marquesina con logotipo Muestre socios o marcas confiables en una franja de desplazamiento continuo. Utilice `marquee-fade` para mezclar los bordes con el fondo. ```html
Acme
Globex
Initech
Umbrella
Hooli
Pied Piper
Vehement
Massive
``` ## Tarjetas de testimonios Desplácese por las tarjetas de testimonios con una sutil pausa al pasar el mouse para facilitar la lectura. ```html

"Absolutely love the component library. Saves us hours every sprint."

A

Alex Morgan

Frontend Engineer

"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."

J

Jamie Lee

Product Designer

"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."

S

Sam Rivera

Tech Lead

"Great DX, thoughtful defaults, and the dark mode just works out of the box."

R

Riley Chen

Full Stack Developer

```