Hoy os dejo con un efecto máquina de escribir que podeis aplicar de forma sencilla en vuestros proyectos en cualquier texto.
El enlace al GIT oficial y a la demo son los siguientes:
Repositorio – https://github.com/ChemaAlfonso/writting-machine
Demo – https://chemaalfonso.github.io/writting-machine/
En la propia documentación en GIT podreis ver de forma sencilla como usarlo con a penas configuraciones en cualquiera de vuestros proyectos.
writting machine effect
Simple class to create machine writting effect on texts with minimal configuration.
Usage
Import before you config script
HTML
<h1 class="written-text" id="requiredForMultiple"></h1> <script src="writting-machine.js"></script> <script src="youScripts.js"></script>
JavaScript
// Get the element const myHtmlElement = document.querySelector('.written-text'); // Set the custom texts const myTexts = ['How are you?...', 'Where are you?...', 'Who are you?...', 'Are you?...']; // Instanciate and set the wanted settings let myWritterMachine = new WritterMachine( myHtmlElement, { texts: myTexts, // Your array of texts speed: 250, // Set the writting speed prefix: '', // Add a non animated custom prefix sufix: '', // Add a non animated custom suffix lowerLimit: 0, // Limits the text counting from start upperLimit: 0, // Limits the text counting from end enableStyles: true, // Attach the default styles customStyles: '' // You can set custom styles directly using a string; });
Destroy
if you need to destroy the active effect
JavaScript
myWritterMachine.stopWritter();
Gratuito y para usarlo donde quieras.
Comentarios