crawling-typer
v1.1.1
Published
Transform your text with dynamic typing animations! crawling-typer lets you display an array of strings one at a time, each with its own color. Customize typing speed, delete speed, and pauses between strings. Enjoy full control with loop counts, post-loo
Downloads
10
Maintainers
crawlingwharf90Readme
Documentation
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.
Index
- 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 $\rightarrow$ 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 stringTarget $\rightarrow$ is the target element where the words should be typed
Type Speed $\rightarrow$ 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 $\rightarrow$ 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 $\rightarrow$ 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 $\rightarrow$ 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 $\rightarrow$ The starting state of the effect, this paramater takes only two values:
By default its' value is set to play
BHVR (Behaviour) $\rightarrow$ 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: By default its' value is set to none
Index: Index of the word at which the chosen behaviour should be appliedBy 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 startNOTE: 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 $\rightarrow$ makes the cursor visible, it takes only takes two values:
By default its' value is set to false
Blink Speed $\rightarrow$ 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 $\rightarrow$ sets the symbol that should be used as a cursor icon
By default this is set to an underscore ("_")
EX 1
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); EX 2
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(); });