控制台打印文字效果js插件-typed.js

typed.js是一款模拟控制台打印文字效果的js插件。typed.js可以自由的控制要打印的文字，以及打印的速度等，可以制作出逼真的打印文字效果。

安装

可以通过bower来安装typed.js插件。

bower install typed.js              
                

使用方法

在页面中引入jquery和typed.js文件。

<script src='path/to/jquery.min.js'></script>
<script src='path/to/typed.js'></script>                  
                

HTML结构

使用一个<span>元素来作为打印控制台容器。

<span class="element"></span>              
                

初始化插件

可以通过纯js的方法来初始化type.js插件。

document.addEventListener("DOMContentLoaded", function(){
  Typed.new(".element", {
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 0
  });
});                  
                

也可以将typed.js作为jquery插件来使用。

$(function(){
  $(".element").typed({
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 0
  });
});                  
                

CSS样式

你需要使用下面的css样式来添加光标的闪烁效果。

.typed-cursor{
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-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; }
}
.typed-fade-out{
    opacity: 0;
    animation: 0;
    transition: opacity .25s;
}                  
                

配置参数

typed.js插件的所有可用配置参数如下：

Typed.new(".element", {
  strings: ["First sentence.", "Second sentence."],
  // Optionally use an HTML element to grab strings from (must wrap each string in a 
)
  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 (must use CSS class)
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutSpeed: 500, // milliseconds
  // loop
  loop: false,
  // null = infinite
  loopCount: null,
  // show cursor
  showCursor: true,
  // character for cursor
  cursorChar: "|",
  // attribute to type (null == text)
  attr: null,
  // either html or text
  contentType: 'html',
  // 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() {}
});                  
                

typed.js控制台打印文字效果js插件的egithub地址为：https://github.com/mattboldt/typed.js