typed - 文字打印效果js插件

PetitQ 文本/链接 2018-11-09 2.81K 0 0

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

使用方法:

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

也想出现在这里？联系我们吧

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

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

HTML 结构:

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

```
<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 <p>)

```
  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

typed - 文字打印效果 js 插件

已有 703 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

文本/链接

typed - 文字打印效果js插件

使用方法:

HTML 结构:

初始化插件:

CSS 样式:

配置参数:

typed - 文字打印效果 js 插件

相关文章

鼠标划过图标背景滑动切换jQuery效果

页面锚链接平滑过渡效果jQuery插件

纯CSS3炫酷彩色粉笔字特效

发表回复取消回复

热销模板

文本/链接

使用方法:

HTML 结构:

初始化插件:

CSS 样式:

配置参数:

typed - 文字打印效果 js 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复