Author: | kelvinsekx |
---|---|
Views Total: | 444 views |
Official Page: | Go to website |
Last Update: | August 10, 2021 |
License: | MIT |
Preview:

Description:
letterloading.js is a vanilla JavaScript library to simulate a text loading effect by animating an array of text strings.
Also can be used to create a typewriter-like text typing effect or to create a text rotator where the text is typed character by character.
How to use it:
1. Install the package with NPM and import the letterloading
as an ES module.
# NPM $ npm i letterloading --save
import LetterLoading from 'letterloading';
2. Or include the letterloading.js
script in the document.
<script src="library/letterloading.js"></script>
3. Initialize the library and define an array of strings to be animated in the container you specify.
new LetterLoading('#myContainer', { strings: [ "String 1", "String 2", "String 3" ], });
4. Set the animation speed. Default: 9.
new LetterLoading('#myContainer', { loadspeed: 8 });
5. Set the time to wait before starting the animation. Default: 2500ms.
new LetterLoading('#myContainer', { delay: 3000 });
6. Determine whether to loop the animation. Default: true.
new LetterLoading('#myContainer', { loop: false });
7. Determine whether to print strings in a random order. Default: true.
new LetterLoading('#myContainer', { randomizeEl: false });
8. Hide and replace your text with a custom character before revealing.
new LetterLoading('#myContainer', { char: "***", hideChaar: false });
9. Set the cursor type: line | block | underscore.
new LetterLoading('#myContainer', { cursorType: "line" });
10. Determine whether to enable the cursor.
new LetterLoading('#myContainer', { cursor: true });
11. Determine the Letter Loading Simulation: Liga or Typed.
new LetterLoading('#myContainer', { simulate: "typed" });
Changelog:
v2.0.0 (08/10/2021)
- allowing easy simulations integration with individual exported simulations
- reduction in options power to only cater for custom options to enhance existing simulations by the community
- robustness by allowing Letterloading to be extendible
v1.2.1 (04/28/2021)
- handle err
v1.2.0 (04/23/2021)
- introduced simulate options, a beginning clipse into further animation choose with letterloading
- strictly define typedJS to only accept empty char and force randomizeEl to false
- allow options for cursorType: line | block | underscore