Efecto de escritura de texto flexible en Vanilla JavaScript-Malarkey

Vista prévia

Descripción

Malarkey. js es un plugin de JavaScript vainilla para crear texto flexible escribiendo/eliminando efectos al igual que la máquina de escribir.

Funcionamiento

Instalación.

# Yarn
$ yarn add malarkey

# NPM
$ npm install malarkey --save

Incluya la versión compilada de Malarkey. js en la Página Web.

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

Cree un contenedor donde desee imprimir el texto.

<div class="typewriter"></div>

Inicializa la librería de Malarkey y estamos listos para irnos.

malarkey()

Empiece a escribir el texto con los siguientes métodos.

malarkey()

.type('CSS') // type

.pause() // pause

.delete() // delete

.type('Script')

.pause()

.delete()

Opciones y funciones de devolución de llamada:

const element = document.querySelector('.typewriter')

function callback (text) {

element.textContent = text
}

const options = {



typeSpeed: 50,



deleteSpeed: 50,



pauseDuration: 2000,



repeat: false
}

malarkey(callback, options)

Métodos API completos.

malarkey()


// type

 .type(string, options)


// pause

.pause(options)


// delete

.delete(characterCount, options)


// clear

.clear()


// calls the given fn function.

.call(fn)


// stops the sequence

.triggerStop(fn)


// resumes the sequence

.triggerResume()


// returns true if the sequence is currently stopped

.isStopped()