Typed.js---a library that types. Enter in any string with animation

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

GitHub here

Step1:

link typed.js in the body bottom

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>

Step2:

html

The string wanna show wrap into a div named typed-strings.
The space showing the sentence in the span named typed.
And I build a box ouside the typed-wrap to show a picture with changing background colors.

css

The basic styles in the site.

css

The above css makes a blink cursor.

css

A style for fade-out .
Fix the box width and height and center the image.

Step3:

js

Here I'm using pure javascript.

When document listen the DOM has loaded,the typed function executes.

Typed.new(".element", {

  strings: ["First sentence.", "Second sentence."],

  // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)

  stringsElement: null,

  // typing speed

  typeSpeed: 0,

  // time before typing starts

  startDelay: 0,

  // backspacing speed

  backSpeed: 0,

  // shuffle the strings

  shuffle: false,

  // time before backspacing

  backDelay: 500,

  // Fade out instead of backspace (must use CSS class)

  fadeOut: false,

  fadeOutClass: 'typed-fade-out',

  fadeOutSpeed: 500, // milliseconds

  // loop

  loop: false,

  // null = infinite

  loopCount: null,

  // show cursor

  showCursor: true,

  // character for cursor

  cursorChar: "|",

  // attribute to type (null == text)

  attr: null,

  // either html or text

  contentType: 'html',

  // call when done callback function

  callback: function() {},

  // starting callback function before each string

  preStringTyped: function() {},

  //callback for every typed string

  onStringTyped: function() {},

  // callback for reset

  resetCallback: function() {}

}); 

In the demo, when string is typing ,the function applied,which the box background color change to random one.

I build a function called getRandomColor() to generate a random color each time.