Flexible and Extensible JavaScript Library to Simulate Letters Animation

text-loading-effect-letterloading-js

LetterLoading js is a JavaScript library for great letter simulation. It is the default simulation is the simulation of loading characters.

Flexibility: This is because it’s intended from the ground up to just download emulation of letters. It can be extended to achieve more animation simulation (this feature is currently in progress). This is achieved through API emulation.

letterloading.js is a javascript vanilla library to simulate the effect of text loading by moving a group of text strings. It can also be used to create a typewriter-like text writing effect or to create a rotating text where the text is written letter by letter.

text animation, text animation css, anime js text animation, text animation css effects, text animation js, text change animation css

How to make use of 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 embody the letterloading.js script within the doc.

<script src="library/letterloading.js"></script>

3. Initialize the library and outline an array of strings to be animated within the container you specify.

new LetterLoading('#myContainer', {
    strings: [
      "String 1",
      "String 2",
      "String 3"
    ],
});

4. Set the animation speed.

new LetterLoading('#myContainer', {
    loadspeed: 8
});

5. Set the time to attend earlier than beginning the animation.

new LetterLoading('#myContainer', {
    delay: 3000
});

6. Determine whether or not to loop the animation.

new LetterLoading('#myContainer', {
    loop: false
});

7. Determine whether or not to print strings in random order.

new LetterLoading('#myContainer', {
    randomizeEl: false
});

8. Hide and change your textual content with a customized character earlier than revealing.

new LetterLoading('#myContainer', {
    char: "***",
    hideChaar: false
});

9. Set the cursor type: line | block | underscore.

new LetterLoading('#myContainer', {
    cursor: "line"
});

Text Loading Effect By Animating Characters, LetterLoading Plugin/Github, javascript text animation library, moving text animation css


See Demo And Download

Official Website(kelvinsekx): Click Here

This superior jQuery/javascript plugin is developed by kelvinsekx. For extra Advanced Usages, please go to the official website.