Animated Placeholder Text In Pure JavaScript – superplaceholder.js

Preview:

Description:

superplaceholder.js is a JavaScript library for animated placeholders that allow you to rotate through an array of placeholder text with a typing effect inside the input field.

How to use it:

Place the superplaceholder.js script at the end of the document so the page loads faster.

<script src="dist/superplaceholder.js"></script>

Initialize the superplaceholder on the target input field.

superplaceholder({
  el: input1,
  sentences: [ 'cssscript.com', 'www.google.com', 'www.facebook.com' ],
  options: {
    loop: true
  }
})

All default options.

options: {
  // delay between letters (in milliseconds)
  letterDelay: 100, // milliseconds
  // delay between sentences (in milliseconds)
  sentenceDelay: 1000,
  // should start on input focus. Set false to autostart
  startOnFocus: true,
  // loop through passed sentences
  loop: true,
  // shuffle the passed sentences
  shuffle: false,
  // show cursor
  showCursor: true,
  // cursor character
  cursor: '|'
  
}

Changelog:

v0.1.2 (08/14/2018)

• Added more options