¿Recuerdas esa sensación mágica de los primeros días de internet, cuando veías un texto deslizarse suavemente por la pantalla? Esa era la famosa «marquesina» o marquee. Era llamativa, era novedosa y estaba en todas partes.
Avancemos hasta hoy. Quieres añadir ese mismo efecto dinámico a tu sitio web, quizás para anunciar ofertas, mostrar noticias de última hora o simplemente añadir un toque de movimiento. Buscas en Google y te encuentras con la etiqueta <marquee>.
¡Detente!
Para convertirte en un verdadero experto y construir una web moderna, eficiente y profesional, necesitas saber que existe una forma correcta y una forma muy, muy incorrecta de hacerlo.
En esta guía definitiva, te llevaré de la mano en un viaje completo. No importa si no has escrito una línea de código en tu vida, si eres un usuario de WordPress o un desarrollador experimentado. Al final de este artículo, dominarás el arte de la marquesina como un profesional.
¿Qué es exactamente una marquesina de texto?
Una marquesina es, simplemente, un texto (o cualquier otro elemento, como imágenes) que se desplaza horizontal o verticalmente a través de un área definida en una página web. Su uso más común es para «tickers» de noticias, anuncios o mensajes destacados que necesitan captar la atención del usuario.
El método antiguo (y desaconsejado): la etiqueta <marquee>
Para entender el presente, debemos conocer el pasado. La etiqueta <marquee> fue introducida por Microsoft en los años 90. Es increíblemente fácil de usar, lo cual explica su popularidad inicial.
Así se ve en su forma más básica:
HTML
<marquee>¡Hola! Soy un texto que se mueve gracias a una etiqueta obsoleta.</marquee>Esta etiqueta tenía muchos atributos para controlar su comportamiento, como la dirección (direction), la velocidad (scrollamount) y si debía rebotar (behavior="alternate").
Pero, y este es el «pero» más importante del artículo, solo porque puedas usarla, no significa que debas hacerlo.
La razón crucial: por qué DEBES evitar <marquee> en 2025
Usar la etiqueta <marquee> hoy en día es el equivalente digital a construir una casa con materiales prohibidos. Funciona por ahora, pero es inseguro, inestable y poco profesional. Aquí están las razones clave:
- ♿ Pésima Accesibilidad: Es una barrera para usuarios con discapacidades. El texto en movimiento es muy difícil de leer para personas con dislexia o baja visión. Además, los lectores de pantalla que usan las personas ciegas a menudo leen el texto repetidamente de forma confusa.
- 🚫 No es un Estándar Web: La etiqueta
<marquee>NUNCA fue parte del estándar oficial de HTML. Fue declarada obsoleta en HTML5. Esto significa que los navegadores no tienen ninguna obligación de seguir soportándola y podría dejar de funcionar con cualquier actualización futura. - 👎 Mala Experiencia de Usuario (UX): Seamos honestos, a menudo resulta molesto y distrae del contenido principal. Da una apariencia anticuada y poco profesional. El usuario no tiene control para detener el texto si quiere leerlo con calma.
- 📉 Rendimiento: Es menos eficiente que las alternativas modernas, forzando al navegador a realizar cálculos y «repintar» la pantalla de una manera que consume más recursos de los necesarios.
Un experto no solo sabe cómo hacer las cosas, sino que entiende por qué elige una herramienta sobre otra. Elegir no usar
<marquee>es tu primera decisión como experto.
La solución moderna y profesional: crear una marquesina con HTML y CSS
Bienvenidos al método correcto. Usaremos la combinación de HTML semántico y animaciones CSS. Esta técnica es eficiente, accesible, personalizable, compatible con todos los navegadores modernos y totalmente profesional.
No te asustes si nunca has escrito CSS. Te lo explicaré línea por línea.
Paso 1: El HTML (La estructura base)
Nuestro HTML es limpio y simple. Creamos un <div>, que es como una caja contenedora, y le damos un nombre de clase (por ejemplo, marquesina-moderna) para poder identificarla con nuestro CSS. Dentro, ponemos nuestro texto en un párrafo <p>.
HTML
<div class="marquesina-moderna">
<p>¡Esta es una marquesina moderna con CSS! Es accesible, eficiente y 100% personalizable. Dentro puedes poner <a href="#">enlaces</a>, <strong>texto importante</strong> y mucho más.</p>
</div>Eso es todo. Simple, ¿verdad? La estructura no podría ser más limpia.
Paso 2: El CSS (La magia de la animación explicada)
Aquí es donde creamos el movimiento. Copia y pega este código. A continuación, te explicaré qué hace cada parte en lenguaje sencillo.
CSS
/* ---- Estilos para la Marquesina Moderna ---- */
/* 1. El contenedor principal (la "ventana") */
.marquesina-moderna {
width: 100%; /* Ocupará todo el ancho disponible */
overflow: hidden; /* ¡La clave! Oculta todo lo que se salga de la caja */
background: #f0f0f0; /* Un color de fondo suave */
border: 1px solid #ccc; /* Un borde sutil */
box-sizing: border-box; /* Para que el borde no añada tamaño extra */
}
/* 2. El texto que se moverá */
.marquesina-moderna p {
/* Configuración inicial */
margin: 0; /* Elimina el margen por defecto de los párrafos */
padding: 12px 0; /* Espacio vertical para que no se vea apretado */
display: inline-block; /* Permite que el párrafo se mueva como un solo bloque */
padding-left: 100%; /* ¡Importante! Empuja el texto para que empiece justo fuera de la vista a la derecha */
white-space: nowrap; /* Evita que el texto se parta en varias líneas */
/* La animación */
animation: mover-marquesina 25s linear infinite; /* Aplicamos la animación que definiremos abajo */
}
/* 3. ¡El truco de experto! Pausar la animación al pasar el ratón */
.marquesina-moderna:hover p {
animation-play-state: paused;
}
/* 4. Definición de la animación (los "fotogramas") */
@keyframes mover-marquesina {
0% {
transform: translateX(0%); /* Estado inicial: el texto está a la derecha, recién empezando a entrar */
}
100% {
transform: translateX(-100%); /* Estado final: el texto se ha movido completamente a la izquierda, desapareciendo */
}
}Explicación para principiantes:
.marquesina-moderna: Es la caja contenedora. La líneaoverflow: hidden;es la más importante. Imagina que es una ventana: solo ves el texto cuando pasa por delante, y lo que está fuera (antes de entrar o después de salir) es invisible..marquesina-moderna p: Es el texto en sí.padding-left: 100%;lo empuja al principio para que comience fuera de la «ventana».white-space: nowrap;lo mantiene todo en una sola línea larga, para que no se rompa.animation: mover-marquesina 25s linear infinite;: Esta línea le dice al texto: «Quiero que te animes. Usa la animación llamadamover-marquesina, que dure25segundos, a una velocidad constante (linear) y repítela para siempre (infinite)».:hover p { animation-play-state: paused; }: Esto es genial para la experiencia de usuario. Cuando alguien pone el cursor del ratón sobre la marquesina, la animación se detiene. Esto permite leer el texto con calma o hacer clic en un enlace fácilmente.@keyframes mover-marquesina: Aquí definimos la animación. Es muy simple: le decimos que al 0% del tiempo (el inicio), el texto esté en su posición inicial (translateX(0%)) y al 100% del tiempo (el final), se haya desplazado completamente a la izquierda (translateX(-100%)). El navegador se encarga de calcular todos los pasos intermedios.
Tutorial para WordPress: cómo añadir tu marquesina como un bloque
Ahora que tienes el código, ¿cómo lo pones en tu web de WordPress? Te mostraré dos métodos, uno rápido y otro más robusto y reutilizable.
Opción 1: Para un uso rápido y único (bloque de HTML personalizado)
Perfecto si solo quieres poner la marquesina en una página o entrada específica.
- Ve al editor de la página o entrada donde quieras añadir la marquesina.
- Haz clic en el botón azul o negro
+para añadir un nuevo bloque. - En el buscador de bloques, escribe «HTML Personalizado» y selecciónalo.
- Ahora, copia y pega el siguiente código completo (HTML + CSS) dentro del bloque que acabas de añadir.
HTML
<style>
/* Estilos de la Marquesina */
.marquesina-moderna {
width: 100%; overflow: hidden; background: #f0f0f0; border: 1px solid #ccc; box-sizing: border-box;
}
.marquesina-moderna p {
margin: 0; padding: 12px 0; display: inline-block; padding-left: 100%; white-space: nowrap;
animation: mover-marquesina 25s linear infinite;
}
.marquesina-moderna:hover p {
animation-play-state: paused;
}
@keyframes mover-marquesina {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
</style>
<div class="marquesina-moderna">
<p>
¡Edita este texto directamente en WordPress! Añade tus noticias, ofertas o lo que quieras.
</p>
</div>- ¡Y ya está! Haz clic en «Actualizar» o «Publicar» y visita tu página. Verás la marquesina funcionando perfectamente. Puedes editar el texto dentro de las etiquetas
<p>directamente en el bloque.
Opción 2: El método correcto y reutilizable (usando el personalizador de CSS)
Este es el método de los profesionales. Añades el CSS una sola vez a tu tema, y luego puedes crear marquesinas en cualquier parte de tu web usando solo el HTML.
Paso A: Añadir el CSS a tu web
- En tu panel de WordPress, ve a Apariencia → Personalizar.
- Busca la pestaña que dice «CSS Adicional». Esta sección es para añadir tus propios estilos sin modificar los archivos del tema.
- Copia y pega SOLO EL CÓDIGO CSS en el cuadro de texto.
- Haz clic en el botón «Publicar» en la parte superior. El CSS ya está guardado y activo en toda tu web.
CSS
/* ---- Estilos para la Marquesina Moderna (para toda la web) ---- */
.marquesina-moderna {
width: 100%;
overflow: hidden;
background: #f0f0f0;
border: 1px solid #ccc;
box-sizing: border-box;
}
.marquesina-moderna p {
margin: 0;
padding: 12px 0;
display: inline-block;
padding-left: 100%;
white-space: nowrap;
animation: mover-marquesina 25s linear infinite;
}
.marquesina-moderna:hover p {
animation-play-state: paused;
}
@keyframes mover-marquesina { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }Paso B: Usar la marquesina en cualquier página
- Ahora, ve a cualquier página o entrada.
- Añade un bloque de «HTML Personalizado» como en la opción 1.
- Pero esta vez, solo necesitas pegar el código HTML, ya que el estilo ya está cargado.
HTML
<div class="marquesina-moderna"><p> ¡Esta marquesina es súper fácil de añadir porque el CSS ya estaba en mi web! </p> </div>¡Felicidades! Ahora puedes crear tantas marquesinas como quieras en tu sitio de forma limpia y eficiente.
Llevando tu marquesina al siguiente nivel (personalización avanzada)
¿Quieres más control? ¡Claro que sí! Modificar nuestra marquesina CSS es muy fácil.
- Para cambiar la velocidad:En el CSS, busca la línea animation: mover-marquesina 25s linear infinite;. Cambia el 25s (25 segundos). Un número más bajo (ej: 10s) hará que el texto se mueva más rápido. Un número más alto (ej: 50s) lo hará más lento.
- Para cambiar la dirección (de izquierda a derecha): Solo necesitas hacer dos pequeños cambios en los @keyframes:
/* Para mover de izquierda a derecha */
@keyframes mover-marquesina { 0% { transform: translateX(-100%); /* Empieza desde la izquierda */ } 100% { transform: translateX(100%); /* Termina en la derecha (usa 100%, no 0%) */ } }- Y en
.marquesina-moderna p, cambia elpadding-left: 100%porpadding-right: 100%. - Para crear una marquesina vertical (de abajo hacia arriba): Esto es un poco más avanzado, pero totalmente posible.
HTML
<div class="marquesina-vertical"><p>Línea 1<br>Línea 2<br>Línea 3</p></div>CSS
/* CSS para marquesina vertical */
.marquesina-vertical {
height: 100px; /* Dale una altura fija */
width: 100%; overflow: hidden; /* ...otros estilos de fondo/borde... */
}
.marquesina-vertical p {
animation: mover-vertical 10s linear infinite;
}
@keyframes mover-vertical { 0% { transform: translateY(100%); /* Empieza abajo */ } 100% { transform: translateY(-100%); /* Termina arriba */ } }Conclusión: ahora eres un experto en marquesinas HTML y CSS
Has completado el viaje. Ya no eres alguien que simplemente sabe copiar y pegar una etiqueta. Eres alguien que:
- Conoce la historia de la etiqueta
<marquee>y entiende su contexto. - Comprende las razones fundamentales (accesibilidad, estándares, UX) para elegir la tecnología moderna.
- Domina la técnica profesional con CSS, entendiendo cómo funciona cada pieza del puzle.
- Sabe implementarlo de forma práctica y eficiente en WordPress, la plataforma más usada del mundo.
La verdadera marca de un experto no es saber todas las respuestas, sino saber hacer las preguntas correctas y elegir las herramientas adecuadas para el trabajo. Hoy has aprendido a elegir la herramienta correcta. Ahora, ¡a crear!
Preguntas frecuentes
¿Puedo poner imágenes dentro de la marquesina CSS?
¡Sí! Simplemente coloca una etiqueta <img> dentro del párrafo <p>, junto al texto. La animación moverá todo el contenido del párrafo.
¿Esta marquesina CSS es compatible con móviles (responsive)?
Absolutamente. Al usar porcentajes para el ancho (width: 100%), se adaptará automáticamente al tamaño de cualquier pantalla, ya sea un ordenador de escritorio, una tablet o un móvil.
¿Añadir esta animación ralentizará mucho mi sitio web?
No. Las animaciones CSS basadas en transform (como translateX y translateY) son extremadamente eficientes. Son aceleradas por hardware (usan la tarjeta gráfica del dispositivo), por lo que su impacto en el rendimiento es mínimo, a diferencia de la antigua etiqueta <marquee>.
He visto otros tutoriales que usan JavaScript. ¿Por qué este método es mejor?
Mientras que con JavaScript se puede lograr un control aún más granular, para un efecto de marquesina simple, usar solo CSS es mucho más ligero y eficiente. No requiere cargar archivos JavaScript adicionales, lo que hace que tu página cargue más rápido.
Ok, entiendo todo, pero por alguna razón extraña, mi jefe/cliente me obliga a usar la etiqueta <marquee>. ¿Qué hago?
Es una situación difícil. Si es absolutamente innegociable, usa la etiqueta <marquee>, pero intenta al menos educar a tu jefe/cliente sobre las desventajas, especialmente las de accesibilidad. Documenta que la recomendación profesional fue usar CSS y que el uso de <marquee> fue una petición explícita. A veces, nuestro trabajo también es asesorar.
Deja una respuesta