Easy Text Typing and Deleting JavaScript Library – TextScript.js

Category: Animation , Javascript | June 23, 2024
Author:amyssnippet
Views Total:22 views
Official Page:Go to website
Last Update:June 23, 2024
License:MIT

Preview:

Easy Text Typing and Deleting JavaScript Library – TextScript.js

Description:

TextScript.js is an easy-to-use JavaScript library for creating smooth text typing & deleting effects inspired by typewriters.

It allows you to animate text by printing characters one by one and then deleting them to display the next text in your sequence.

This can be useful for creating attention-grabbing headers, animated taglines, or interactive content sections on your sites or landing pages.

How to use it:

1. Download the zip and add the main script textscript.js as a module to your document.

<script src="textscript.js" type="module"></script>

2. Add your text strings to the data-textscript-strings attribute of an HTML element. Separate each string with a comma. For example:

<h2 
  data-textscript-strings="CSS,Script,Com">
</h2>

3. Customize the typing speed, deleting speed, and looping option using the following attributes:

<h2
  data-textscript-strings="CSS,Script,Com"
  data-textscript-typespeed="50"
  data-textscript-backspeed="100"
  data-textscript-loop="true">
</h2>

4. Add a prefix to your animated text.

<h2
  data-textscript-strings="CSS,Script,Com"
  data-textscript-prefix="Breaking News:">
</h2>

Changelog:

v1.1 (06/23/2024)

  • Now you can see a blinker effect after typing letter and before backspacing letters
  • add a attribute named Prefix

You Might Be Interested In:


Leave a Reply