Tutorial Typed.js | Animación de escritura en Javascript

En esta publicación, vamos a hablar sobre el  tutorial de typed.js . Una biblioteca de JavaScript que te ayudará a crear una animación de escritura en tu página web. Una buena idea para un mensaje de bienvenida para el visitante de su sitio web o para simular una consola de desarrollo y mucho más. ¡Vamos a ver!

Tutorial Typed.js | Animación de escritura en Javascript

Preparar

Primero comencemos con la descarga de la última versión de github e incluyamos typed.js o typed.min.js en tu página con la etiqueta de script.

<script src="typed.js"></script>

Ahora tendrá 2 formas de proporcionar la cadena de entrada a typed.js. Lo primero es hacer que la biblioteca lea el texto del elemento div existente. El segundo es proporcionar una serie de cadenas.

Escribiendo desde div existente

Aquí está el texto de ejemplo separado en una etiqueta de 2 párrafos dentro de un elemento div.

<div id="typed-strings">
     <p>Typed.js is a <strong>JavaScript</strong> library.</p>
     <p>It can type anything you want</p>
</div>

Cree un nuevo elemento span que desee crear una animación de escritura.

<span id="typed"></span>

Luego cree un nuevo objeto mecanografiado y pase la identificación del elemento span, luego siga una opción de stringsElement que especifica la identificación del elemento div existente que contiene el texto.

var typed = new Typed('#typed',{
    stringsElement: '#typed-strings',
});

Personalicemos la velocidad de escritura y la velocidad de retroceso agregando las siguientes opciones.

var typed = new Typed('#typed',{
                    stringsElement: '#typed-strings',
                    backSpeed: 40,
                    typeSpeed: 40
                  });

Y aquí esta el resultado.

O verlo en este vídeo.

Verá que typed.js ocultará automáticamente la división existente y mostrará solo el intervalo con la animación de escritura. La ventaja de utilizar este método es que el motor de búsqueda podrá ver su texto e indexarlo.

Escribiendo desde la matriz

Otro método es que puede especificar la matriz de cadenas como esta.

var typed = new Typed('#typed',{
                    strings:["First sentence","Second sentence"],
                    backSpeed: 40,
                    typeSpeed: 40
                  });

El cursor no esta parpadeando

En el momento actual en el que estoy creando este tutorial, verás que el cursor no está parpadeando. Alguien está trabajando en esta función, pero por ahora tendrá que agregar manualmente CSS extra para el efecto de parpadeo como este.

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

Cursor separado por salto de línea

Otro problema que muchas personas han experimentado con typed.js es que el cursor estará en una línea nueva separada en el elemento de visualización de bloque.

Para resolver este problema, deberá agregar display: inline o inline-block al elemento de destino.

#typed {
    display: inline;
}

Personalización

Hay muchas más opciones disponibles para typed.js. Por ejemplo, puede hacer un bucle en la animación estableciendo el bucle en verdadero. O baraja las oraciones del texto entre cada tipo.

var typed = new Typed('#typed',{
                   strings:["First sentence","Second sentence"],
                   backSpeed: 40,
                   typeSpeed: 40,
                   loop: true,
                   shuffle: true
                 });

Puedes encontrarlos y probarlos todos en la página de documentación del proyecto .

Aquí tenemos más artículos interesantes para ti:

Sistema de facturación en php

Detectar tipo de dispositivo JavaScript