Efecto de máquina de escribir usando iTyped

Tal vez hayas visto en varias páginas web el efecto de máquina de escribir. Se ha convertido muy popular y en realidad es muy divertido ver como la página web nos muestra información variada utilizando dicho efecto. Quizás te hayas preguntado cómo se hace. Aunque existen muchas maneras de alcanzar este efecto, en este tutorial te mostraré cómo hacerlo utilizando un plugin de JavaScript llamado iTyped. Es genial y muy fácil de utilizar.

Primero vamos a crear 3 documentos dentro de un directorio que puedes nombrar como gustes.

1. index.html
2. estilos.css
3. script.js

Dentro del HTML crea un marcado con el contenido que desees. Acuérdate de conectar los documentos de la hoja de estilos y JavaScript como generalmente harías, solo asegúrate de añadir type="module" en la etiqueta <script>.

<script src="script.js" type="module></script>

Esto porque vamos a estar utilizando el CDN de iTyped. Para aprender más sobre iTyped puedes visitar este enlace. Existen 2 maneras de utilizar iTyped, estas son instalando el paquete con NPM o utilizando el CDN. En este tutorial vamos a utilizar el CDN ya que no estaremos creando nada complicado que requiera de un empaquetador de módulos ni nada por el estilo.

Para poder obtener el efecto de máquina de escribir, también debemos de añadir un bloque de CSS a la hoja de estilos proveído por la gente de iTyped.

.ityped-cursor {
    font-size: 2.2rem;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}
 
@keyframes blink {
    100% {
        opacity: 0;
    }
}
 
@-webkit-keyframes blink {
    100% {
        opacity: 0;
    }
}
 
@-moz-keyframes blink {
    100% {
        opacity: 0;
    }
}

Además, asegúrate de tener en tu marcado la etiqueta que va utilizar iTyped añadiéndole un id que vas a utilizar al momento de configurar iTyped en el documento de JavaScript.

Ahora ya tenemos el marcado listo y la hoja de estilos y JavaScript conectados, solo nos falta configurar iTyped con JavaScript y es muy sencillo. Simplemente importemos el script que inicializa iTyped.

  import { init } from 'ityped'

Ahora elijamos el elemento de HTML con el id que le asignamos (puede ser el nombre que quieras).

  const elementoConId = document.querySelector('#iTypedId')

Ahora solo nos queda usar la funcion init que importamos de iTyped.

  init(elementoConId, { showCursor: false, strings: ['HTML', 'CSS', 'JavaScript' ] });

Si lo hiciste de la manera correcta el elemento de HTML debe estar mostrando el efecto de máquina de escribir utilizando las palabras HTML, CSS y JavaScript. Para aprender cómo hacerlo en React o añadir otras opciones puedes ver la documentación. Tambien puedes ver el video adjunto de la página de YouTube JavaScript Ecosistema. Hasta la próxima.