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.
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.
<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.
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.
$('#ejemplo4').typeIt({
strings: ["Se pueden personalizar como queramos <span class='just-a-class'>, yuhuu!</span> ♠ ♥ ♣ ♦"],
speed: 100 });
});
Finalizando
Se le pueden añadir más parámetros a los efectos, tales como startDelay o breakDelay y muchos más que los podéis ver en la página de la librería misma.
Aquí os dejo el enlace al repositorio de este tutorial en GitHub para que podáis ver mejor el código.
