jQuery Plugin For Simple Text Typing/Deleting Animations - ghost-typer.js

File Size: 17.1 KB
Views Total: 2964
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Simple Text Typing/Deleting Animations - ghost-typer.js

ghost-typer.js is a simple jQuery text animation / text rotator plugin that rotates through an array of strings with text typing/deleting effects.

How to use it:

1. Add both jQuery library and the jQuery ghost-typer.js script to the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ghost-typer.js"></script>

2. Create an empty inline element for the text rotator.

<span id="ghost"></span>

3. Initialize the plugin and define an array of text you want to rotate through.

("#ghost").ghosttyper({
  messages: ['front-end development', 'graphic design', 'JavaScript(jQuery)','Wordpress']
});

4. Customize the animation speed.

("#ghost").ghosttyper({

  // animation speed for typing effect
  timeWrite: 100,

  // animation speed for deleting effect
  timeDelete: 50,

  // animation delay
  timePause: 1000
  
});

5. You might need to disable the infinite loop functionality in some cases.

("#ghost").ghosttyper({

  repeat: false

});

6. Execute a callback function after the text rotator is completed.

("#ghost").ghosttyper({

  repeat: false,
  callback: function(){}

});

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