Text Loading Effect By Animating Characters – letterloading.js

Category: Animation , Javascript , Loading | November 17, 2020
Author: kelvinsekx
Views Total: 142 views
Official Page: Go to website
Last Update: November 17, 2020
License: MIT

Preview:

Text Loading Effect By Animating Characters – letterloading.js

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
});

You Might Be Interested In:


Leave a Reply