实现酷炫的打字机效果插件typed.js

前言：
最近在写前端项目的过程中，在逛别人的优质的个人博客的时候，发现一个好玩有趣的东西。看下图，类似在打字的效果，然后又在思考的感觉，感觉整个网页都充满了思想。于是我就去百度这种效果怎么实现。
有很多原生的实现办法，但几乎都是js在操作Dom元素，但是我是在vue项目上编写的，显然不妥。这个时候发现了typed.js，他会在vue使用的时候多封装了一层，使得不是操作dom。现在分享下这个插件。

typed.js的介绍

typed.js是一个类型化库，效果是用打字机的方式显示一段话，可以自定义任何字符串、指定显示速度、指定是否循环等
如下图官方（作者）演示。

其实可以使用原生JS来实现这个效果，但是还是很麻烦的
typed.js是一个轻量级的JavaScript插件, 用于实现页面文字的打字动画效果
这是一款轻量级，使用简单，功能强大的插件。

typed.js的使用

环境准备

在原生html中 引入CDN

1
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

在vue中 安装依赖

1
2
3
npm install typed.js
然后我们在需要的目录下，或者main.js 引入
import Typed from 'typed.js';
使用

(1) 改变光标的样式 通过cursorChar: '_',属性来改变光标的样式
(2) 批量键入 通过转义字符``来包括需要批量展示的数据或者文字。会有一段文字不是通过打印出来的，而是突然完整的出现，会有一种提问打字，机器问答的感觉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>var typed = new Typed(".box", {
        strings: ["热爱永远热泪盈眶", "只要累不死，就卷死他人",
        "未来可期","你知道爱情吗？`我知道爱情买卖`"],
        typeSpeed: 100,//打字的速度
        smartBackspace: true, // 开启智能退格 默认false
        cursorChar: '♡',
        backSpeed: 50,//后退速度
        backDelay: 500,//后退延迟
        loop:true,//是否循环
        startDelay:1000,//起始时间
        fadeOut:true,//淡出效果
  });

    </script>

可以在页面上放置HTML div并从中读取，而不是使用strings数组来插入字符串。这允许机器人、搜索引擎以及禁用JavaScript的用户，在页面上查看您的文本。

1
2
3
4
5
6
7
8
9
10
<body>
    <div id="typed-strings">
        <p>你像 <strong>天外来物一样 </strong> 求之不得</p>
        <p>你在世俗的名字里, </em><em>不重要了。</em> --薛之谦</p>
    </div>
    <span id="typed"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
</script>

在Vue中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
  <div class="rightbox">
      <div class="headerimg" :style="{'background-image':'url('+img.url+')'}">
          <div class="element_box">
              <span class="element"></span>
          </div>
      </div>
      <div class="box">
          <div class="left">

          </div>
          <div class="right">

          </div>
      </div>
  </div>
</template>

<script>
import Typed from 'typed.js'
export default {
  data () {
    return {
      img: {
        url: require('@/assets/image/headerimg2.png')
      },
      typedjs: ''
    }
  },
  methods: {
    headertitle () { // 打字机效果
      this.typedjs = new Typed('.element', {
        strings: ['不负青云之志，永存赤子之心'],
        typeSpeed: 100, // 打字的速度
        cursorChar: '|', // 光标
        smartBackspace: true, // 开启智能退格 默认false
        backSpeed: 50, // 后退速度
        backDelay: 500, // 后退延迟
        loop: true// 是否循环 默认false
        // startDelay:1000,//起始时间
        // fadeOut:true,//淡出效果
      })
    }
  },
  mounted () {
    this.headertitle()
  }
}
</script>

<style lang="less" scoped>
    .rightbox{
        padding-left: 8rem;
        width: 100%;
        .headerimg{
            width: 100%;
            height: 100vh;
            position: relative;
            // background: url();
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            img{
                width: 100%;
                // height: 100vh;
            }
            .element_box{
                position: absolute;
                top: 60%;
                // left: 50%;
                font-size: 40px;
                display: block;
                text-align: center;
                width: 100%;
                -webkit-background-clip: text;
                background-clip: text;
                background-image: linear-gradient(rgb(42, 42, 41), rgb(255, 68, 0));
                -webkit-text-fill-color: transparent;
            }
        }
    }
</style>

更多属性
直接在标签上加属性就行，全部的属性如下：

属性 类型 描述 用法
strings 数组 要输入的字符串 strings="['Text 1', 'Text 2']"
stringsElement 串 包含字符串子元素的元素的ID :stringsElement="'myId'"
typeSpeed 数 输入速度(以毫秒为单位) :typeSpeed="50"
startDelay 数 开始输入之前的时间(以毫秒为单位) :startDelay="1000"
backSpeed 数 退格速度(以毫秒为单位) :backSpeed="10"
smartBackspace 布尔型 仅退格与上一个字符串不匹配的内容 :smartBackspace="true"
shuffle 布尔型 洗弦(打乱语句的输出顺序) :shuffle="true"
backDelay 数 退格前的时间(以毫秒为单位) :backDelay="100"
fadeOut 布尔型 淡出而不是退格 :fadeOut="true"
fadeOutClass 串 淡入淡出动画CSS类 :fadeOutClass="'fadeOutClass'"
fadeOutDelay 布尔型 淡出延迟(以毫秒为单位) :fadeOutDelay="true"
loop 布尔型 循环字符串 :loop="true"
loopCount 数 循环次数 :loopCount="3"
showCursor 布尔型 显示光标 :showCursor="true"
cursorChar 串 光标字符 :cursorChar="'_'"
autoInsertCss 布尔型 将游标CSS插入并将HTML淡出 :autoInsertCss="true"
attr 串 用于输入Ex的属性：输入占位符，值或仅HTML文本 :attr="'placeholder'"
bindInputFocusEvents 布尔型 如果el是文本输入，则绑定到焦点并模糊 :bindInputFocusEvents="true"
contentType 串 纯文本格式为“ html”或“ null” :contentType="'html'"