NPM crawling-typer is a js node package made to easily implement the stylish effect of typing an array of words one character at the time.
Quickly customize settings such as typing speed, delete speed, pause time between one word and the next, number of times the effect should loop and effect behavior after said number (if finite) of loops has concluded.
- Add crawling-typer to your project
- Type Words Function
- Secondary Functions
i. Pause Effect
ii. Resume Effect
iii. Reset Effect
iv. Set Cursor - Examples
To use crawling typer in your project just import the npm package in the JavaScript File you want to use the effect in by adding the following import statement at the top of your page:
import TypeWords from 'https://cdn.jsdelivr.net/npm/[email protected]/typer.js';function TypeWords(words, target, typeSpeed, deleteSpeed, pauseTime, loops, state, bhvr)Words -> is the array of words that you want to display, each word has to paramaters:
text: is the string that you want to type
color: the color of the this string
Target -> is the target element where the words should be typed
Type Speed -> is the time in miliseconds (ms) that should be waited after a char is displayed until the next one is typed
By default its' value is set to 250ms
Delete Speed -> is the time in miliseconds (ms) that should be waited after a char is removed until the next one is deleted
By default its' value is set to 75ms
Pause Time -> is the time in miliseconds (ms) that should be waited after a word has been fully typed to when it starts getting deleted, also used for the time since a word has been fully deleted to when the next one starts being typed
By default its' value is set to 1000ms
Loops -> The number of times the array should loop before the effect stops, if this number is set to 0 then the effect will loop endlessly
By default its' value is set to 0
State -> The starting state of the effect, this paramater takes only two values:
Play: The effect will start with the typing animation running
Pause: The effect will start without the typing animation running {The animation will need to be started by using the Resume or Reset functions}
By default its' value is set to play
BHVR (Behaviour) -> This defines how the effect should behave after the effect has looped a finite amount of times.It takes two paramagters:
Name: name of the behaviour case that should be applied.
Name takes the following values:
None: Nothing will happen the effect will just stop playing leaving the target blank
Forwards: The effect will stop on the word with the given index on the last loop
By default its' value is set to none
Index: Index of the word at which the chosen behaviour should be applied
By default its' value is set to 0
TypeWords.pause();Pauses the effect at the current typed/deleted character
TypeWords.resume(); Resumes the effect at the current typed/deleted character
TypeWords.reset(); Restarts the effect from the start
NOTE: The effect can be reset only if the effect is paused
TypeWords.cursor(visible, blinkSpeed, symbol)Adds a cursor to the head of the typed word.
Takes the following parameters:
Visible -> makes the cursor visible, it takes only takes two values:
False: The cursor will not be shown
True: The cursor will be shown
By default its' value is set to false
Blink Speed -> sets the speed at which the cursor should be blink, if it's set to 0 the cursor will remain still and not blink
NOTE: It is worth noteing that every time a character is typed this timer resets
By default its' value is set to 0
Symbol -> sets the symbol that should be used as a cursor icon
By default this is set to an underscore ("_")
This creates a basic typing effect cycling endlessly between the words "Hello" and "Everybody" using default values and adding a cursor to the effect
HTML
<body>
<p>(✿◠‿◠) <span class="generated"></span></p>
<script type="module" src="index.js"></script>
</body>JAVA SCRIPT
import TypeWords from 'https://cdn.jsdelivr.net/npm/[email protected]/typer.js';
console.log("TypeWords: ", TypeWords);
let target = document.getElementsByClassName("generated")[0];
const typingEffect = TypeWords([{text:"Hello", color:"#000000"}, {text:"Everybody", color:"#CA8311FF"}], target);
typingEffect.cursor(true); This plays the childish game "She Loves Me, She Loves Me Not" by looping the words a random amount of times and stopping on one of the two random outcomes. Starts the effect in the pause state, so the user needs to start it by clicking the resume of reset buttons, adds a pause button so he can pause the effect and removes the cursor, adds custom typeSpeed, deleteSpeed and pauseTime between words
HTML
<body>
<p>(✿◠‿◠) <span class="generated"></span></p>
<div>
<span><button id="pause" class="def-btn">Pause</button></span>
<span><button id="resume" class="def-btn">Resume</button></span>
<span><button id="reset" class="def-btn">Reset</button></span>
</div>
<script type="module" src="index.js"></script>
</body>JAVA SCRIPT
import TypeWords from 'https://cdn.jsdelivr.net/npm/[email protected]/typer.js';
const numberOfLoops = Math.floor(Math.random() * 10) + 1;
const randIndex = Math.floor(Math.random() * 2);
console.info(`number of loops ${numberOfLoops}\nrandom index ${randIndex}`);
let target = document.getElementsByClassName("generated")[0];
let resetBtn = document.getElementById("reset");
let pauseBtn = document.getElementById("pause");
let playBtn = document.getElementById("resume");
const typingEffect = TypeWords([{text:"She Loves Me", color:"#319507FF"}, {text:"She Loves Me Not", color:"#A91818FF"}], target, 150, 100, 1500, numberOfLoops, "pause", {name:"forwards", index: randIndex});
resetBtn.addEventListener('click', () => { typingEffect.reset(); });
pauseBtn.addEventListener('click', () => { typingEffect.pause(); });
playBtn.addEventListener('click', () => { typingEffect.resume(); });