Animated Placeholder Text In Pure JavaScript – superplaceholder.js

Category: Form , Javascript , Recommended | March 7, 2016
Author: chinchang
Views Total: 1,645
Official Page: Go to website
Last Update: March 7, 2016
License: MIT

Preview:

Animated Placeholder Text In Pure JavaScript – superplaceholder.js

Description:

superplaceholder.js is a JavaScript library for animated placeholder that allows 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: [ 'www.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
  
}

One thought on “Animated Placeholder Text In Pure JavaScript – superplaceholder.js

  1. Dedwards108

    Worked great, input1 refers to the id for the input you want the placeholder to be animated on.

    I changed the start on focus too so that it animates on page load. I changed “startOnFocus:!0” to “startOnFocus:!1”.

    Works much better than other options out there and the code was fairly small too.

    Reply

Leave a Reply