Charla efecto maquina de escribie

[carlosecuador]

el otro dia vi este template preview.themeforest.net
Como s epuede hacer ese efecto de typewriting/

 

Opinión  Envato Market. es un plugin o un theme

J

Información  Ayuda con WP Rocket WordPress Plugin 3.18.1.3

[Cosmin Vladut]

Tienes la posibilidad de seleccionarlo en Elementor al agregar un titulo, pero sino, puedes hacerlo con este codigo:

Por ejemplo seleccionas un titulos en elementor y le pones la clase .titulo-maquina
Dentro del apartado de CSS personalizado de Elementor pro añades este codigo:

.titulo-maquina {
  display: inline-block;
  overflow: hidden;
  border-right: 0.15em solid #000;
  white-space: nowrap;
  letter-spacing: 0.15em;
  width: 0;
  animation: typing 10s steps(40, end) infinite, blink-caret 1.5s step-end infinite;
}

@keyframes typing {
  0% { width: 0; }
  50% { width: 100%; }
  60% { width: 100%; }
  100% { width: 0; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #000; }
}

Espero te sirva