jQuery Plugin For Terminal Text Typing Effect - typed.js

jQuery Plugin For Terminal Text Typing Effect - typed.js
File Size: 32.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery plugin for emulating the terminal typing effect that enables you to print html or plain text as if it's being typed on the screen.

Features:

  • Supports both backspacing and fading effects.
  • Custom typing speed.
  • Has the ability to shuffle the html or text strings.
  • Infinite loop is supported as well.
  • Custom cursor character & animation.
  • Callback functions.
  • Also allows to implement it in vanilla JavaScript(See the demo page).

Installation:

# NPM
$ npm install typed.js

# Bower
$ bower install typed.js

How to use it:

1. Put the main JavaScript file typed.js after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/typed.js"></script>

2. Create an element in which you want to print the strings.

<div class="container"></div>

3. Call the function typed() on the container element and define an array of strings you'd like to print out.

$(".container").typed({
  strings: ["String 1", "String 2", "..."]
});

4. All default options to customize the text typing effect.

$(".container").typed({

  strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
  stringsElement: null,

  // typing speed
  typeSpeed: 0,

  // time before typing starts
  startDelay: 0,

  // backspacing speed
  backSpeed: 0,

  // shuffle the strings
  shuffle: false,

  // time before backspacing
  backDelay: 500,

  // Fade out instead of backspace
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutDelay: 500, // milliseconds

  // loop
  loop: false,

  // false = infinite
  loopCount: false,

  // show cursor
  showCursor: true,

  // character for cursor
  cursorChar: "|",

  // attribute to type (null == text)
  attr: null,

  // either html or text
  contentType: 'html'
  
});

5. Style & animate the cursor while typing.

.typed-cursor {
  opacity: 1;
  font-weight: 100;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}
 @-keyframes 
blink {  0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}
 @-webkit-keyframes 
blink {  0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}
 @-moz-keyframes 
blink {  0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}
 @-ms-keyframes 
blink {  0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}
 @-o-keyframes 
blink {  0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}

.typed-fade-out {
  opacity: 0;
  animation: 0;
  transition: opacity .25s;
}

6. Callback functions.

$(".container").typed({

  // call when done callback function
  callback: function() {},

  // starting callback function before each string
  preStringTyped: function() {},

  //callback for every typed string
  onStringTyped: function() {},
  
  // callback for reset
  resetCallback: function() {}

});

Change log:

2017-06-25

  • fixes new backspace existing text feature

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