jQuery Plugin To Simulate Terminal Text Effects - t.js

jQuery Plugin To Simulate Terminal Text Effects - t.js
File Size: 9.15 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

t.js is a lightweight, programmable jQuery plugin to print any text with configurable typing and erasing effects just like you type something in a terminal.

How to use it:

1. Just place the JavaScript file t.js after jQuery library and you're ready to go.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/t.min.js"></script>

2. The JavaScript to print out text from inline html. You're able to add delete/insert/delay/wait effects using semantic markups as follows:

<div id="t">
  Hello world. Let's wait <del>hundred</del>two seconds ..<ins>2</ins><br/><br/>
  <strong>Thanks for waiting.</strong> Now, t.js will detect a
  <del>regular</del>'special' char which triggers the function <mark>foo()</mark>.
  *<ins>2</ins><ins> &larr; Yay, FTW!!</ins>
</div>
$('#t').t();

3. Or define your text message in the JavaScript as this:

$('#t').t('text to print');

4. All possible configuration options and callback functions.

$('#t').t({

  // typing speed in milliseconds
  speed:75, 

  // enable 'human-like'
  speed_vary:false, 

  // delays start
  delay:false, 

  // mistyping
  mistype:false,

  // en or de
  locale:'en',

  // enable caret
  caret:true, 

  // enable blink
  blink:false,  

  // permanent caret blinking
  blink_perm:true,

  // wrapper tag
  tag:'span',

  // infinite or N times
  repeat:false, 

  // Callbacks
  init:function(elem){}, 
  typing:function(elem,chars_total,chars_left,char){},
  fin:function(elem){}

});

5. API methods.

// add new content
$("#t").t('add',content);

// pause typing
$("#t").t('pause'[,true/false]);

Change log:

2017-06-06

  • v0.9

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