Submit your widget

jquery.type-char-animation - Emulates a user typing some text

Created 4 years ago   Views 1676   downloads 615    Author nitriques
View DemoDownload
15
Share |

jQuery Type Char Animation

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/