Emulates a user typing some text
Works with regular DOMElements as well as Forms Elements.
See this file.
npm i jquery.type-char-animation --save-dev
See below for the complete documentation
// start the animation
$('#my-div').typeCharAnimation({
initialText: null, // string
initialDelay: 0,
text: null, // string
step: null, // function (char, pos)
complete: null, // function ()
blockUserInput: false,
focus: true,
reverse: false,
matrixEffect: 0,
passes: 1,
matrixValues: 'abcdefghijklmnopqrstuvwxyz'.split(''),
charTime: getCharTime, // function (char, pos)
spaceTime: getSpaceTime, // function (char, pos)
isWhiteSpace: isWhiteSpace // function (char, pos)
});
// stop the animation
$('#my-div').typeCharAnimation('stop');
// stop and go to end
$('#my-div').typeCharAnimation('stop', {end: true});
// access (or change) the global defaults
$.typeCharAnimation.defaults;
These are the possible config values. The format is optionName: defaultValue
.
Any string
The text to animate. This option is required.
Any string
The initial text to prepend to the text. Will not be animated.
Any positive integer
The initial delay (in ms) before the animation starts
function (char, pos) {}
A callback function called at each step (or frame) of the animation.
function () {}
A callback function called once, at the end of the animation.
true | false
Flag indicating if the plugin should prevent user input in this element while animating. Mostly usefull for editable elements.
true | false
Flag indicating if the plugin should focus the element after changing its value.
true | false
Flag indicating if the animation should run in reverse (characters are removed instead of added).
Any positive integer
Changes the matrixEffect
last characters to random ones, for one pass.
Any positive integer
Number of steps (or frames) to wait between animations. Usefull with matrixEffect
.
Array
Possible random values to use when matrixEffect > 0
.
function (char, pos) {}
A function that must return the duration in milisecond of a given frame, when the character is not a white space.
function (char, pos) {}
A function that must return the duration in milisecond of a given frame, when the character is a white space.
function (char, pos) {}
A function that must return true if the given char should be considered as a white space character.
Made with love in Montréal by https://deuxhuithuit.com/
Licensed under the MIT License: http://deuxhuithuit.mit-license.org/