00. Inicio

01. Nosotros

02. Casos

03. News

04. Contacto

05. Hablemos

Efecto Marquee de texto para tu sitio web

abril 13, 2024

Crea un efecto de texto marquee en tu sitio web con éstos sencillos pasos en Divi.

Código Css:

/*marquee texto*/

.marquee {

  width: 100%;

  margin: 0 auto;

  white-space: nowrap;

  overflow: hidden;

  height: 230px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  align-items: center;

}

.marquee .text {

  display: inline-block;

  padding-left: 3rem;

  text-indent: 0;

  animation: marquee 30s linear infinite !important;

  font-size: 10.5rem;

  line-height: 125%;

  letter-spacing: 0.04;

  color: #ffffff;

}

@keyframes marquee {

  0% {

    transform: translate(0, 0);

  }

  100% {

    transform: translate(-100%, 0);

  }

}

Abre un módulo de texto y agrega el textos que deseas colocar código:

<section class=”marquee”>

<h1 class=”text”>*Error 404</h1>

<h1 class=”text”>*Error 404</h1>

<h1 class=”text”>*Error 404</h1>

</section>

Luego en tu módulo de texto agrega la siguiente clase CSS:

Marquee

Listo! Ya tienes tu marquee de texto para incorporar en tu sitio web.