Saltar al contenido

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

Valora este articulo.

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!

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聽.

Comparte

Loading...