超逼真的控制台打字jQuery特效

typewriting是一款可以制作超逼真控制台打字特效的jQuery插件。该插件使用简单，你可以设置任何你想打印输入的文字内内容，可以设置打字速度和光标闪烁的频率等。

使用方法

HTML结构

该打字特效的HTML结构使用一个空的<div>来制作即可。

<div class="terminal"></div> 
              

CSS样式

为了效果更加逼真，你可以为这个打字效果添加一些CSS样式。

body {
  width: 100%;
  margin: 0px;
  font-family: 'Helvetica Neue';
  background-color: #020202;
}

.terminal {
  width: 60%;
  font-size: 26px;
  color: #00fd55;
  letter-spacing: 2px;
  position: absolute;
  top: 50%;
  left: 20%;
}

.terminal::before {
  content: ">";
  margin-right: 10px;
}                
              

JAVASCRIPT

在页面DOM元素加载完毕之后可以通过下面的方法来初始化该控制台打字特效插件。

$('.terminal').typewriting( "Hello World!", {

  // default: 150
  "typing_interval": 200,

  // default: 0.7s
  "blink_interval": "1s",

  // default: black
  "cursor_color": "#00fd55"
  
}
              

配置参数

typewriting()

该打字特效的第一个参数是你想要输出的文字。

第二个参数有下面的一些选项：

• typing_interval：打字的速度。
• blink_interval：光标闪烁的速度。
• cursor_color：光标的颜色。

第三个参数是打字效果完成之后的回调函数：

$('.string').typewriting( "Text here", {
    "typing_interval": 300,
    "blink_interval": "1.5s"
    "cursor_color": "white"
}, function() {
    console.log( "End." );
});                
              

rewrite()

这个方法可以在同一个元素重写不同的文字。

$('.string').rewrite( "Another text here", function() {
    console.log( "End, 2." );
});