Efecto de escritura usando jQuery y la librería TypeIt

Hoy os voy a presentar una librería de Javascript que permite escribir textos animados de diferentes formas. Esta librería puede ser muy útil a la hora de diseñar la SPA (single page application) de alguna empresa o la landing page ya que da un bonito efecto.

Para tener la librería funciona en nuestra página web lo único que tenemos que hacer es añadir las librerías de jQuery, la propia de TypeIt y yo he añadido también la de Bootstrap, ya que la usaré para dejar un poco más bonita la página de muestra que he creado que os dejaré al final de este artículo en mi repo de GitHub.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
<script src="https://cdn.jsdelivr.net/jquery.typeit/3.0.1/typeit.min.js">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js">
<script src="app.js">

Una vez incluido ya podemos empezar a conseguir esos efectos chulos!

Tipo 1: Texto simple en una línea

Este es el único método en el que el texto que queremos que aparezca se introduce directamente en la DOM.

21dfbf54a5331ea9c0f09508f910e76b

index.html

<h1 id="ejemplo1">Texto simple que se modifica desde el html!</h1>

app.js

$('#ejemplo1').typeIt();

Tipo 2: Texto en varias lineas

A partir de aquí, los demás ejemplos no van a tener nada más que un h1 y una id en el html. En esta segunda opción tenemos un efecto de escritura con una velocidad un poco más rapida debido al speed y también que son dos cadenas en dos diferentes líneas con un salto de línea.

665bb7c3563e54184400d0c47165ee36

<h1 id="ejemplo2"></h1>

app.js

$('#ejemplo2').typeIt({
       strings: ["Esto es una línea de texto", "Se puede escribir en más de una línea."],
       speed: 50
});

Tipo 3: Texto que se escribe para ser borrado y reemplazado

En este ejemplo tenemos el efecto de que escribimos algo, lo borramos y lo sustituimos por otro texto.

3906e5360f7ac263ec21d17cf1cc2db7

index.html

<h1 id="ejemplo3"></h1>

app.js

$('#ejemplo3').typeIt({
         strings: ["Texto que se escribe para ser...", "borrado y reemplazado por otro texto!"],
         speed: 50,
         breakLines: false
});

 Tipo 4: Texto personalizado

Podemos añadir “iconitos” con markups y entities a nuestro texto.

66d2fa206ad1890f00b5d593d77f0698

$('#ejemplo4').typeIt({
       strings: ["Se pueden personalizar como queramos <span class='just-a-class'>, yuhuu!</span> &spades; &hearts; &clubs; &diams;"],
       speed: 100 });
});

 Finalizando

Se le pueden añadir más parámetros a los efectos, tales como startDelaybreakDelay y muchos más que los podéis ver en la página de la librería misma.github-logo

Aquí os dejo el enlace al repositorio de este tutorial en GitHub para que podáis ver mejor el código.

Desarrollador a tiempo completo, amante del buen rol y los juegos de plataforma. Mi tiempo libre me gusta invertirlo para ver series y malas peliculas