Animated Placeholder Text In Pure JavaScript – superplaceholder.js

Category: Form , Javascript , Recommended | August 14, 2018
Author:chinchang
Views Total:3,959 views
Official Page:Go to website
Last Update:August 14, 2018
License:MIT

Preview:

Animated Placeholder Text In Pure JavaScript – superplaceholder.js

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

You Might Be Interested In:


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