Author: | ichub |
---|---|
Views Total: | 3,040 views |
Official Page: | Go to website |
Last Update: | February 24, 2020 |
License: | MIT |
Preview:

Description:
tply is a lightweight yet configurable text animation plugin to make your text appear as if it is being typed on a typewriter or terminal, with a blinking cursor animated with CSS3.
How To Use it:
1. Download and load the tply library on the HTML page.
<script src="/path/to/dist/tply.js"></script>
2. Wrap the text into the <type>
element:
<div id="tply-source"> <type>Text To Type Out</type> </div>
3. Create a container on which you want to render the typewriter effect.
<div id="tply-destination"> </div>
4. Hide the text on page load.
#tply-source { display: none; }
5. Activate the typewriter effect.
tply.animate( document.getElementById("tply-source"), document.getElementById("tply-destination") );
6. Add a delay to the typewriter effect if you have multi-line text to type out.
<div id="source"> <type>Text 1</type> <wait>500ms</wait> <br> <type>Text 2</type> <wait>300ms</wait> <br> <type>Text 3</type> </div>
7. Repeat the typewriter effect.
<repeat data-repeat="3"> <type>This will repeat three times!</type> </repeat> <repeat data-repeat="infinite"> <type>This will repeat forever!</type> <wait>1s</wait> <clearparent></clearparent> </repeat>
8. Clear the parent content. Useful for repeat mode as you see above.
9. Clear all children content.
<clearall></clearall>
10. Sometimes you might need a deleting effect to simulate someone removing text on the page.
<delete data-chars="3" data-ignore-whitespace="true"> </delete>
11. Possible configurations. The example here shows how to animate your text word by word instead.
tply.animate( document.getElementById("tply-source"), document.getElementById("tply-destination"), { types: [ name: "custom", properties: { "data-char-interval": "0ms", "data-comma-interval": "0ms", "data-period-interval": "0ms", "data-word-interval": "100ms" }, styleClasses: "custom", style: "font-family: monospace;" ], processing: [ tag: "div", pre: function(element) { element.innerText += " haha" }, post: function(element) { element.parentElement.style.backgroundColor = "red"; } ] });
<type data-type="custom"> Text To Type Out </type>