Efecto Marquee Animado solo con HTML y CSS: ¡Haz que tu web destaque en WordPress y Elementor!

¿Buscas un efecto visual moderno que aporte dinamismo y personalidad a tu página web? El efecto marquee animado es tendencia en diseño web 2024 y puedes implementarlo sin necesidad de plugins ni JavaScript, solo con HTML y CSS puro. Este tutorial te enseña cómo añadir un marquee horizontal animado (carrusel de textos) a tu web, compatible con WordPress y Elementor, ideal para titulares, frases llamativas o banners de promociones.

¿Por qué usar un Marquee Animado?

• Captura la atención: Un texto en movimiento atrae las miradas y aumenta el tiempo de permanencia en tu web.
• No necesita JavaScript: 100% CSS, más rápido y seguro.
• Compatible con WordPress y Elementor: Simplemente copia el código y pégalo en un widget HTML de Elementor o en tu tema.
• Personalizable: Cambia textos, colores y velocidad fácilmente.
• Responsive: El efecto se adapta a móviles y tablets.

¿Cómo funciona este efecto?

La clave está en repetir varias veces el mismo texto dentro de un contenedor con clases especiales, y usar CSS animations para mover ese bloque de izquierda a derecha (o viceversa). Además, aplicamos estilos modernos como blend modes, bordes redondeados, y tipografías llamativas para conseguir un look profesional y único.

Ejemplo de código listo para copiar

HTML

<div class='marquees'>
  <section class='marquee' style='--char-count: 28'>
    <div class='marquee--inner'>
      <p>ElSaltoWeb.es</p>
      <p aria-hidden='true'>ElSaltoWeb.es</p>
      <p aria-hidden='true'>ElSaltoWeb.es</p>
      <p aria-hidden='true'>ElSaltoWeb.es</p>
      <p aria-hidden='true'>ElSaltoWeb.es</p>
      <p aria-hidden='true'>ElSaltoWeb.es</p>
    </div>
  </section>

  <div class='marquee' style='--char-count: 30'>
    <div class='marquee--inner'>
      <p>Diseño y desarrollo web</p>
      <p aria-hidden='true'>Diseño y desarrollo web</p>
      <p aria-hidden='true'>Diseño y desarrollo web</p>
      <p aria-hidden='true'>Diseño y desarrollo web</p>
      <p aria-hidden='true'>Diseño y desarrollo web</p>
      <p aria-hidden='true'>Diseño y desarrollo web</p>
    </div>
  </div>

  <section class='marquee' style='--char-count: 22'>
    <div class='marquee--inner'>
      <p>Rompiendo las reglas del UX/UI</p>
      <p aria-hidden='true'>Rompiendo las reglas del UX/UI</p>
      <p aria-hidden='true'>Rompiendo las reglas del UX/UI</p>
      <p aria-hidden='true'>Rompiendo las reglas del UX/UI</p>
      <p aria-hidden='true'>Rompiendo las reglas del UX/UI</p>
      <p aria-hidden='true'>Rompiendo las reglas del UX/UI</p>
    </div>
  </section>

  <section class='marquee' style='--char-count: 24'>
    <div class='marquee--inner'>
      <p>¿Te atreves?</p>
      <p aria-hidden='true'>¿Te atreves?</p>
      <p aria-hidden='true'>¿Te atreves?</p>
      <p aria-hidden='true'>¿Te atreves?</p>
      <p aria-hidden='true'>¿Te atreves?</p>
      <p aria-hidden='true'>¿Te atreves?</p>
    </div>
  </section>
</div>

CSS

.marquee {
  --marquee--colour: #f3bb0b;
  --marquee--repeat-count: 6;
  --marquee--base-duration: 1s;
  --marquee--repeat-size: calc(100% / var(--marquee--repeat-count));
  --marquee--double-size: calc(var(--marquee--repeat-size) * 2);
  --marquee--duration: calc(
    var(--marquee--base-duration) * var(--char-count, 20)
  );
  overflow: hidden;
  width: 110%;
  margin-left: -5%;
  mix-blend-mode: screen;
  transform: rotate(-5deg);
  background: var(--marquee--colour);
  color: #000;
}
.marquee:nth-child(even) {
  --marquee--direction: -1;
  transform: rotate(5deg);
  background: #000;
  color: var(--marquee--colour);
}
.marquee p {
  transform: translateY(0.07em);
  font-weight: bold;
  margin: 0;
  display: flex;
  gap: 0.5em;
  line-height: 1.1;
  font-size: clamp(2.5rem, 12vw, 6.2rem);
  font-family: "Bebas Neue", sans-serif;
}
.marquee p::after {
  content: "*";
  transform: translateY(0.175em);
}
.marquee--inner {
  width: max-content;
  display: flex;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee--inner {
    animation: marquee var(--marquee--duration) infinite linear;
  }
  .marquee--inner:hover {
    animation-play-state: paused;
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquees {
  align-content: center;
  display: grid;
  gap: 3vw;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .marquees {
    gap: 18vh;
  }
}

Cómo añadir este efecto marquee en WordPress y Elementor

1. Entra en tu editor de Elementor y añade un widget HTML o Código personalizado donde quieras que aparezca el efecto.
2. Pega el código HTML del marquee.
3. En el personalizador de tu tema o en Elementor, abre la sección de CSS personalizado y pega el código CSS.
4. Guarda y visualiza la página. ¡Listo!

Personalización avanzada

Puedes cambiar fácilmente los textos, colores y la velocidad de animación modificando los valores de las variables CSS --marquee--colour, --char-count y el número de repeticiones. Si usas varias frases, alterna el color de fondo y la dirección para un efecto aún más impactante.

¿Por qué es ideal para tu web?

• Moderniza la estética de tu sitio sin recargarlo.
• Aumenta la interacción: al pasar el ratón por encima, la animación se ralentiza, permitiendo que el usuario lea cada mensaje.
• No necesitas instalar plugins adicionales: todo funciona solo con HTML y CSS.
• Perfecto para destacar llamadas a la acción, nombres de marca, ofertas o titulares creativos.
• Mejora tu SEO: Google valora la permanencia y la interacción visual.

¿Listo para destacar? ¡Implementa este efecto hoy mismo!

Si quieres que tu web luzca profesional y a la última en tendencias de diseño, este efecto marquee animado es la elección perfecta. Copia y pega el código, personalízalo a tu gusto, y muestra al mundo una web viva, dinámica y memorable.

¿Tienes dudas o quieres más efectos? Visita ElSaltoWeb.es para más tutoriales, recursos gratuitos y trucos de diseño web para WordPress y Elementor.