Efecto de máquina de escribir personalizado en Nativie JavaScript-T-Writer. js
| Autor: | ChrisCavs |
|---|---|
| Views Total: | 647 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 7, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Otra librería de efectos de máquina de escribir en JavaScript nativo.
La biblioteca T-Writer. js le permite imprimir cualquier cadena con efectos de escritura/borrado/reposo configurables.
Funcionamiento
Instale & importar.
$ npm install t-writer.js --save
import Typewriter from 't-writer.js'
Cree un contenedor en el que desee escribir el texto.
<div class="example"></div>
Inicialice T-Writer. js con opciones opcionales.
const example = new Typewriter(target, {
// infinite loop
loop: false,
// animated cursor
animateCursor: true,
// blinking speed
blinkSpeed: 400,
// typing speed
typeSpeed: 90,
// deleting speed
deleteSpeed: 40,
// min/max speed
typeSpeedMin: 65,
typeSpeedMax: 115,
deleteSpeedMin: 40,
deleteSpeedMax: 90,
// default classes
typeClass: 'type-span',
cursorClass: 'cursor-span',
// default colors
typeColor: 'black',
cursorColor: 'black'
}) Imprima el texto con la siguiente API.
writer
.type('String 1')
.rest(500)
.changeOps({ deleteSpeed: 80 })
.remove(4)
.type('String 2')
.rest(500)
.remove(4)
.type('String 3')
.rest(500)
.changeOps({ deleteSpeed: 20 })
.remove(21)
.type('String 34')
.rest(500)
.clear()
.start()
