THEMETRIAL

Configurable Text Typing Effect In Pure JS – AutoTyper.js

Author:hsynlms
Views Total:0 views
Official Page:Go to website
Last Update:May 1, 2021
License:MIT

Preview:

Configurable Text Typing Effect In Pure JS – AutoTyper.js

Description:

Yet another text typing effect written in pure JavaScript.

The AutoTyper.js library outputs an array of specific text letter by letter with several useful options:

  • Infinite loop.
  • Custom animation speed/delay.
  • flipflop effect.

How to use it:

Create an empty container where you want to output the text.

<h1 class="demo">
</h1>

Insert the JavaScript file ‘AutoTyper.js’ into the document.

<script src="https://www.cssscript.com/dist/autotyper.js"></script>

Create a new ‘autoTyper’ instance and define an array of text to output.

var typer = new autoTyper({
    selector: ".demo",
    words: ["CSSSCRIPT",".COM","CSSSCRIPT.COM"],
});

Start the text typing effect.

typer.start();

Append a blinking caret to the end of the text while typing.

@-webkit-keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

.demo {
  display: inline-block;
  border-right: 1px solid #404145;
  -webkit-animation: blink-caret 0.5s step-end infinite alternate;
  animation: blink-caret 0.5s step-end infinite alternate;
}

Possible configuration options to customize the text typing effect.

var typer = new autoTyper({
    selector: ".demo",
    words: ["CSSSCRIPT",".COM","CSSSCRIPT.COM"],
    charSpeed: 85, // typing speed
    delay: 2100, // typing delay
    loop: true, // infinite loop
    flipflop: true, // enable flipflop effect
    position: 0, // position
    currentWord: "", // current word
    element: null, // selector
    isStopped: false // is stopped on init
});

Pause/stop the typing effect.

typer.stop();

Changelog:

v1.0.2 (05/01/2021)

  • Chore: packages are updated

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.