Efecto simple Typewriter en JavaScript puro-TypewriterJS

Vista prévia

Descripción

TypewriterJS es un plugin de JavaScript nativo que se puede utilizar para crear un efecto de animación de máquina de escribir automático elegante en sitios Web.

Funcionamiento

Cargue el archivo JS principal Typewriter. js justo antes de la etiqueta del cuerpo de cierre.

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

Cree un elemento de marcador de posición:

<div id="demo"></div>

Inicialice la biblioteca en el elemento y especifique una matriz de cadenas para escribir.

var demo = document.getElementById('demo');

var typewriter = new Typewriter(demo, {


strings: ['Strings', 'To', 'Type']
});

Available API methods to control the typing animation.

// starts the typing animation
typewriter.start()

// Stops the animation
typewriter.stop()

// Time to pause for in milliseconds
typewriter.pauseFor(ms)

// String to type out
typewriter.typeString(string)

// Deletes all strings
typewriter.deleteAll()

// Deletes a amount of characters
typewriter.deleteChars(number)

// callback
typewriter.callFunction(cb);

// Changes thedeleting speed
typewriter.changeDeleteSpeed(speed);

// Changes the delay
 typewriter.changeDelay(delay);

Todas las opciones de configuración para personalizar la animación de escritura.

var typewriter = new Typewriter(demo, {


strings: ['Strings', 'To', 'Type'],


cursor: '|',


delay: 'natural', // 'natural' or Number


loop: false, // infinite loop


autoStart: false,


devMode: false,


wrapperClassName: 'Typewriter__wrapper',


cursorClassName: 'Typewriter__cursor',
});

Registro de cambios

03/17/2019

• v2.5.3: Fixing issue with not deleting nodes in IE11

12/04/2018

• v2.5.2: Fixing issue with delete chars and loop

12/03/2018

• v2.5.1: Fixed issue with increasing exponentially times

11/21/2018

• v2.4.4: Fixed IE11 issues

09/20/2018

• v2.4.4: Added ability to change typing delay

09/16/2018

• v2.3.3: Updated options & API.

09/11/2018

• v2.2.0: Remove all characters before re-starting loop

08/27/2018

• v2.0.0