Terminal Style Typing Animation In jQuery - pixel-blue-writer

pixel-blue-writer is a simple yet customizable jQuery plugin that lets you create Terminal- and Typewriter-style animated typing/deleting effects on the web page.

Features:

• Supports both typing and deleting effects.
• Auto repeats the effects.
• Auto deletes when the text is completely typed.
• Lots of API methods to control the typing and deleting effects.

Basic usage:

1. Include the JavaScript file pxbWriter.js after jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="js/pxbWriter.js"></script>

2. Create the html in which you want to print the strings you specify.

<span id="write-mark"></span><span id="write"></span><span id="write-cursor"></span>

3. Create a new instance and pass the following parameters to the Writer functions:

• target: The target HTML element being written to.
• cursor: The cursor HTML element.
• mark: The mark HTML element.
• typeSpeed: The speed in ms at which each character is typed.
• autoErase: True: Erase after writing. False: Don't.
• loop: True: Write then Erase infinitum. False: Don't.
• eraseDelay: The time in ms which Auto-Erase takes effect after writing.

var write = new Writer(
    $("#write"),
    $("#write-cursor"),
    $("#write-mark"),
    400,
    false,
    false,
    0
);

4. Set the mark of the writer instance.

write.setMark(">");

5. Set the cursor of the writer instance.

write.setCursor("_");

6. Set the animation speed of the writer instance.

write.typeSpeed(2000);

7. Set the Auto-Erase function of the writer instance.

// True: On, False: Off
write.autoErase(true);

8. Set the delay until Auto-Erase begins.

write.eraseDelay(1000);

9. Set the Loop function of the writer instance.

// True: On, False: Off
write.loop(true);

10. Animate the cursor from opacity of 0 to opacity of 1.

write.animateCursor(SPEED);

11. Write the desired message to the target element. Auto-Erase if True, after desired delay. Otherwise, don't.

• message: The message being written.
• index: The index of the message to start writing from.

write.write(message, index);

12. Erase the desired message from the target element. Repeat if True, after desired delay. Otherwise, don't.

• message: The message being erased.
• index: The index of the message to start erasing from.

write.erase(message, index);

---

This awesome jQuery plugin is developed by pxlblue. For more Advanced Usages, please check the demo page or visit the official website.