Author: | chinchang |
---|---|
Views Total: | 3,959 views |
Official Page: | Go to website |
Last Update: | August 14, 2018 |
License: | MIT |
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
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.