Pure JS texto rotador con escribir/eliminar efectos-iTyped. js

Vista prévia

Descripción

iTyped. js es una biblioteca JS ligera y libre de dependencia que le permite rotar una secuencia de cadenas con efectos de escritura/borrado de texto al igual que una máquina de escribir.

Funcionamiento

Cree un elemento insertado en el que desee colocar el rotador de texto.

<span id="ityped" class="ityped"></span>

Importe el archivo JavaScript principal ' iTyped. js ' en el documento.

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

Inicializar el iTyped y definir una matriz de cadenas de texto que desea rotar a través de.

ityped.init('#ityped', {

strings: ['Put you string here...', 'and Enjoy!']
});

Configuración de las animaciones:

ityped.init('#ityped', {

strings: ['Put you string here...', 'and Enjoy!'],

typeSpeed: 100,

backSpeed: 50,

backDelay: 500,

startDelay: 500
});

Personalice el carácter del cursor.

ityped.init('#ityped', {

cursorChar: '|'
});

Mostrar/ocultar el cursor.

ityped.init('#ityped', {

strings: ['Put you string here...', 'and Enjoy!'],

showCursor: true
});

Activar/desactivar la escritura posterior.

ityped.init('#ityped', {

disableBackTyping: false
});

Activar/desactivar bucle infinito:

ityped.init('#ityped', {

strings: ['Put you string here...', 'and Enjoy!'],

loop: true
});

Ejecute una función cuando finalice la animación de escritura.

ityped.init('#ityped', {

onFinished: function () { }
});

Estile el cursor en el CSS.

.ityped-cursor {

font-size: 2.2rem;

opacity: 1;

-webkit-animation: blink 0.3s infinite;

-moz-animation: blink 0.3s infinite;

animation: blink 0.3s infinite;

animation-direction: alternate;
}

@keyframes
 blink {
100% {
 opacity: 0;
}
}
 @-webkit-keyframes
 blink {
100% {
 opacity: 0;
}
}
 @-moz-keyframes
 blink {
100% {
 opacity: 0;
}
}

Registro de cambios

v1.0.3 (09/20/2018)

• Corregidos los errores
• Se agregaron más configs