CSS Fácil: Efecto Máquina de Escribir

Efecto máquina de escribir con CSS PORTADA

En este artículo, crearemos un efecto de máquina de escribir en CSS. No necesitaremos ningún JavaScript para conseguir este efecto y el resultado será así:

Muy bien, ¡comencemos!

Efecto máquina de escribir con CSS

Configurar el HTML y el CSS

En cuanto al HTML, realmente no necesitamos mucho. Sólo queremos un párrafo o elemento de texto que podamos manipular.

<div>
  <p>Beetlejuice, Beetlejuice, Beetlejuice!</p>
</div>

A continuación, vamos a añadir rápidamente algunos estilos básicos para que el texto esté centrado:

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

Y ahora podemos añadir un poco de estilo básico para que el texto destaque un poco más en nuestro CSS.

p {
  font-size: 2rem;
  font-family: "Courier New";
}

A estas alturas, debería ser algo parecido a esto:

Efecto máquina de escribir con CSS

Añadir el signo de tipo parpadeante

Empecemos por añadir el signo de tipo parpadeante al final. Este tipo de signo indica un efecto de máquina de escribir en la mayoría de las aplicaciones; yo utilizaré el de iAWriter, que es azul.

Podemos conseguir este signo intermitente de intercalación aprovechando el borde derecho del elemento p así.

border-right: .15em solid #18BDEC;

Para animar esto, vamos a crear una animación de parpadeo que se ejecutará siempre.

animation: blink 1s steps(1) infinite;

Esta animación de parpadeo será súper sencilla, ya que sólo hay que cambiar el color del borde para que sea transparente hasta la mitad. El CSS para esto quedaría de la siguiente forma.

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

Al añadir el paso 1 en la animación, creamos el efecto de parpadeo rápido en lugar de un desvanecimiento lento.

Lo que da lugar a lo siguiente:

Efecto máquina de escribir con CSS

El efecto de teclear

Ahora es el momento del efecto tipográfico real.

Primero queremos que la etiqueta p tenga un ancho de 0 y que no se ajuste a otras líneas ni muestre el desbordamiento.

width: 0;
overflow: hidden;
white-space: nowrap;

Luego queremos añadir la animación. Como ya tenemos una animación, podemos utilizar un , para separar las dos.

animation: typing 4s steps(38) 1s 1 normal both, blink 1s steps(1) infinite;

Utilicé 38 pasos ya que habría 38 caracteres en mi párrafo.

Veamos cómo debería ser esta animación de mecanografía.

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

Sí, eso es, una simple animación de 0 a 100% de ancho. Y nos dará ese efecto de máquina de escribir tan chulo que buscamos.

Para que tu animación se adapte a tu texto y a tu fuente, puede que tengas que jugar con los ajustes de la animación.

Prueba a cambiar la duración (4s) y los pasos para que te funcione mejor.

Espero que te haya gustado este artículo y que hayas aprendido algo nuevo. Y sobra decir que, si tienes joyitas en CSS que quieras compartir con toda la comunidad aquí te esperamos. No lo dudes y contacta con nosotros.