Sequence Text Typing Effect – AutoType.js

Preview:

Description:

The AutoType.js JavaScript library prints out a sequence of any strings with a typewriter typing animation.

How to use it:

Create the HTML in which you want to print the strings.

<h2 class="auto-typing" ></span></h2>

Initialize the autoTyping and define an array of text strings as follows:

autoTyping({
  container : document.querySelector('.auto-typing'),
  text : ['CSS' , 'SCRIPT', '.NET']
})

Start the animation.

start();

Enable/disable the infinite loop functionality.

autoTyping({
  container : document.querySelector('.auto-typing'),
  text : ['CSS' , 'SCRIPT', '.NET'],
  loop : true
})

Apply custom colors to each string.

autoTyping({
  container : document.querySelector('.auto-typing'),
  text : ['CSS' , 'SCRIPT', '.NET'],
  color : ['red','green','blue']
})

Set the typing/loop speed in milliseconds.

autoTyping({
  container : document.querySelector('.auto-typing'),
  text : ['CSS' , 'SCRIPT', '.NET'],
  typeSpeed : 150,
  loopSpeed : 700
})

Customize the blinking cursor.

autoTyping({
  container : document.querySelector('.auto-typing'),
  text : ['CSS' , 'SCRIPT', '.NET'],
  blink : true, 
  blinkSpeed : 400,
  blinkType : 'default', // or faltted
})