Author: | Auroratide |
---|---|
Views Total: | no views |
Official Page: | Go to website |
Last Update: | September 16, 2021 |
License: | MIT |
Preview:

Description:
typewritten-text is a Custom Element that applies an accessible, configurable typing effect to inline text.
How to use it:
1. Install and import the typewritten-text component.
# NPM $ npm i @auroratide/typewritten-text --save
import '@auroratide/typewritten-text/lib/style.css' import '@auroratide/typewritten-text/lib/define.js'
2. Or directly load the necessary stylesheet and JavaScript in the document.
<link rel="stylesheet" href="/lib/style.css" /> <script type="module" src="/lib/define.js"></script>
3. Wrap your text into the <typewritten-text>
custom element as follows:
CSSScript <typewritten-text>A JavaScript & CSS Website.</typewritten-text>
4. Determine whether to repeat the typing animation.
<typewritten-text repeat>A JavaScript & CSS Website.</typewritten-text>
5. Set the number of milliseconds between each letter.
<typewritten-text letter-interval="500">A JavaScript & CSS Website.</typewritten-text>
6. Determine the time to wait before repeating the typing animation.
<typewritten-text repeat phrase-interval="5000">A JavaScript & CSS Website.</typewritten-text>
7. Determine whether to pause the typing animation until invoked by javascript.
<typewritten-text paused>A JavaScript & CSS Website.</typewritten-text>
8. API methods.
const element = document.querySelector('typewritten-text'); // start element.start(); // pause element.pause() // type the next character element.typeNext() // remove one character element.backspace() // run one frame of the typing animation element.tick() // run one frame of the animation regardless of paused state element.forceTick() // reverse the direction of the animation element.reverse() Reverse the direction of the animation // reset element.reset()
9. Properties.
element.repeat element.paused element.letterInterval element.phraseInterval
10. Events.
element.addEventListener("typewritten-text:started", function(){ // do something }); element.addEventListener("typewritten-text:paused", function(){ // do something }); element.addEventListener("typewritten-text:nextchar", function(){ // do something }); element.addEventListener("typewritten-text:prevchar", function(){ // do something }); element.addEventListener("typewritten-text:phrasetyped", function(){ // do something }); element.addEventListener("typewritten-text:phraseremoved", function(){ // do something });