Biblioteca de escritura de texto altamente configurable-tipo. js
| Autor: | mattboldt |
|---|---|
| Views Total: | 1,495 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 31, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Sólo otra biblioteca de animación de escritura de texto JavaScript que anima el texto para que parezca que está escribiendo.
Instalación
# Yarn $ yarn add typed.js # NPM $ npm install typed.js --save # Bower $ bower install typed.js
Funcionamiento
Descargue e inserte la biblioteca JavaScript con tipo. js en la página HTML.
<script src="typed.min.js"></script>
Defina una matriz de cadenas para escribir en la página.
var typed = new Typed(".element", {
strings: ["String 1", "& String 2", ...]
}); También se le permite escribir el texto definido en el HTML de la siguiente manera:
div class="type-wrap"> <div id="typed-strings"> <span>Typed.js^10 is a <strong>JavaScript</strong> library.</span> <p>It <em>types</em> out sentences.</p> <p>And then deletes them.</p> <p>Try it out!</p> </div> <span id="typed" style="white-space:pre;"></span> </div>
var typed = new Typed("#typed", {
stringsElement: '#typed-strings'
}); Todas las opciones de configuración predeterminadas.
/**
* @property {array} strings strings to be typed
* @property {string} stringsElement ID of element containing string children
*/
strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
stringsElement: null,
/**
* @property {number} typeSpeed type speed in milliseconds
*/
typeSpeed: 0,
/**
* @property {number} startDelay time before typing starts in milliseconds
*/
startDelay: 0,
/**
* @property {number} backSpeed backspacing speed in milliseconds
*/
backSpeed: 0,
/**
* @property {boolean} smartBackspace only backspace what doesn't match the previous string
*/
smartBackspace: true,
/**
* @property {boolean} shuffle shuffle the strings
*/
shuffle: false,
/**
* @property {number} backDelay time before backspacing in milliseconds
*/
backDelay: 700,
/**
* @property {boolean} fadeOut Fade out instead of backspace
* @property {string} fadeOutClass css class for fade animation
* @property {boolean} fadeOutDelay Fade out delay in milliseconds
*/
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
/**
* @property {boolean} loop loop strings
* @property {number} loopCount amount of loops
*/
loop: false,
loopCount: Infinity,
/**
* @property {boolean} showCursor show cursor
* @property {string} cursorChar character for cursor
* @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
*/
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
/**
* @property {string} attr attribute for typing
* Ex: input placeholder, value, or just HTML text
*/
attr: null,
/**
* @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
*/
bindInputFocusEvents: false,
/**
* @property {string} contentType 'html' or 'null' for plaintext
*/
contentType: 'html', Funciones de devolución de llamada.
/**
* All typing is complete
* @param {Typed} self
*/
onComplete: function onComplete(self) {},
/**
* Before each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
preStringTyped: function preStringTyped(arrayPos, self) {},
/**
* After each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
onStringTyped: function onStringTyped(arrayPos, self) {},
/**
* During looping, after last string is typed
* @param {Typed} self
*/
onLastStringBackspaced: function onLastStringBackspaced(self) {},
/**
* Typing has been stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingPaused: function onTypingPaused(arrayPos, self) {},
/**
* Typing has been started after being stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingResumed: function onTypingResumed(arrayPos, self) {},
/**
* After reset
* @param {Typed} self
*/
onReset: function onReset(self) {},
/**
* After stop
* @param {number} arrayPos
* @param {Typed} self
*/
onStop: function onStop(arrayPos, self) {},
/**
* After start
* @param {number} arrayPos
* @param {Typed} self
*/
onStart: function onStart(arrayPos, self) {},
/**
* After destroy
* @param {Typed} self
*/
onDestroy: function onDestroy(self) {} Registro de cambios
v2.0.9 (01/31/2019)
- Bugfixed
v2.0.8 (06/14/2018)
- Corregido: el cursor no parpadea a menos que FadeOut esté presente
v2.0.7 (05/27/2018)
- conflictos fijos y demostración probada
