Efecto de escritura de texto configurable en Pure JS-AutoTyper. js

Vista prévia

Descripción

Sin embargo, otro efecto de escritura de texto escrito en JavaScript puro.

La biblioteca AutoTyper. js genera una matriz de letra de texto específica por letra con varias opciones útiles:

• Bucle infinito.
• Velocidad/retardo de animación personalizados.
• Efecto FlipFlop.

Funcionamiento

Cree un contenedor vacío donde desee generar el texto.

<h1 class="demo">
</h1>

Inserte el archivo JavaScript ' AutoTyper. js ' en el documento.

<script src="dist/autotyper.js"></script>

Cree una nueva instancia de ' autoTyper ' y defina una matriz de texto para la salida.

var typer = new autoTyper({


selector: ".demo",


words: ["WIKICSS",".COM","WIKICSS.COM"],
});

Inicie el efecto de escritura de texto.

typer.start();

Añada un símbolo de intercalación parpadeante al final del texto mientras escribe.

@-webkit-keyframes blink-caret {

50% {


border-color: transparent;

}
}

.demo {

display: inline-block;

border-right: 1px solid #404145;

-webkit-animation: blink-caret 0.5s step-end infinite alternate;

animation: blink-caret 0.5s step-end infinite alternate;
}

Opciones de configuración posibles para personalizar el efecto de escritura de texto.

var typer = new autoTyper({


selector: ".demo",


words: ["WIKICSS",".COM","WIKICSS.COM"],


charSpeed: 85, // typing speed


delay: 2100, // typing delay


loop: true, // infinite loop


flipflop: true, // enable flipflop effect


position: 0, // position


currentWord: "", // current word


element: null, // selector


isStopped: false // is stopped on init
});

Pausar/Detener el efecto de mecanografía.

typer.stop();