Dynamic Animate Placeholder For Input Field – Typewriter.js

Category: Animation , Form , Javascript | March 21, 2019
Author: BornaSepic
Views Total: 270
Official Page: Go to website
Last Update: March 21, 2019
License: MIT

Preview:

Dynamic Animate Placeholder For Input Field – Typewriter.js

Description:

The Typewriter.js JavaScript library applies typewriter-style text typing/deleting animations to placeholder text in the text field.

How to use it:

Import the Typewriter.js into the html document.

<script src="typewriter.js"></script>

Create a new TypeWriter instance, specify the target text field and define an array of text for the animated placeholder.

<input type="text" id="example">
new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3']);

Specify the writing/deleting delay between each character.

new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3'],{
    writeDelay: 60,
    deleteDelay: 40
});

Specify the writing/deleting delay between each placeholder text

new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3'],{
    holdOnceWritten: 1000,
    holdOnceDeleted: 1000
});

Determine if animation will run only once.

new TypeWriter('#example', ['Text 1', 'Text 2', 'Text 3'],{
    stopAfterOnce: true
});

You Might Be Interested In:


Leave a Reply