Smooth transitions for chunks of text.
Traditional "crossfade" effects for text involve treating it like a block level element and doing fades/slides/wipes. The problem is you have to temporarily turn your inline element into a block element to do these transitions.
Text-Mix provides a way to smoothly transition from one chunk of text to another.
http://crccheck.github.io/text-mix.js/
Load text-mix.min.js
.
To get the a transition state between two chunks of text, run:
textMix.textMix(text1, text2, amount)
Example:
textMix.textMix("Winter is coming", "Where did summer go?", 0.5);
Load jquery-text-mix.min.js
.
To transition the contents of an element, call the plugin using the jQuery animation-style args:
.textMix( newText [, duration ][, easing ][, complete ])
400
)linear
)Example:
$('#banner').textMix('Winter is coming');
Text is transitioned word by word. When two numbers are encountered, the script just counts from one to another. Otherwise, a path is drawn based on the matrix solution of the Levenshtein distance, or for new words, inserted character by character. If you want to fudge words so that numbers are aligned, you should just insert extra spaces. For example:
textMix.textMix("I ate 12 cookies", "and 4 cupcakes", 0.2);
To install what's needed for development and to run the test suite:
npm install
To install what's needed to run the demo locally, run:
grunt demo