Sequence Text Typing Effect – AutoType.js

Category: Animation , Text | November 30, 2018
Author:shantoislam6
Views Total:921 views
Official Page:Go to website
Last Update:November 30, 2018
License:MIT

Preview:

Sequence Text Typing Effect – AutoType.js

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

You Might Be Interested In:


Leave a Reply