标签：vue typeSpeed typed 前端 酷炫 js 打字机 true strings
实现酷炫的打字机效果插件typed.js
前言：
最近在写前端项目的过程中，在逛别人的优质的个人博客的时候，发现一个好玩有趣的东西。看下图，类似在打字的效果，然后又在思考的感觉，感觉整个网页都充满了思想。于是我就去百度这种效果怎么实现。
有很多原生的实现办法，但几乎都是js在操作Dom元素，但是我是在vue项目上编写的，显然不妥。这个时候发现了typed.js，他会在vue使用的时候多封装了一层，使得不是操作dom。现在分享下这个插件。
一、typed.js的介绍
typed.js是一个类型化库，效果是用打字机的方式显示一段话，可以自定义任何字符串、指定显示速度、指定是否循环等
如下图官方（作者）演示。
其实可以使用原生JS来实现这个效果，但是还是很麻烦的
typed.js是一个轻量级的JavaScript插件, 用于实现页面文字的打字动画效果
这是一款轻量级，使用简单，功能强大的插件。
二、typed.js的使用
1. 环境准备
- 在原生html中
只需要引入CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
- 在vue中
安装依赖
npm install --save vue-typed-js
2. 使用
原生html
最简单使用
<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: 200,//打字的速度
});
</script>
效果：
输入暂停
可以通过转义字符^1000在字符串中间暂停一段时间。
<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: ["让我想一下是谁来看我了^3000", "原来是你呀老铁"],
typeSpeed: 200,//打字的速度
});
</script>
智能退格
会智能回退到前一句重复的地方
<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,//打字的速度
});
</script>
效果：
改变光标的样式
通过cursorChar: '_',属性来改变光标的样式
批量键入
通过转义字符``来包括需要批量展示的数据或者文字。
会有一段文字不是通过打印出来的，而是突然完整的出现，会有一种提问打字，机器问答的感觉。
<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 的字符串 （SEO 友好）
可以在页面上放置HTML div并从中读取，而不是使用strings数组来插入字符串。这允许机器人、搜索引擎以及禁用JavaScript的用户，在页面上查看您的文本。
<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>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 200,//打字的速度
});
</script>
效果：
其他常用的属性
这里我只列举了我用的多的，还有更多的属性在文章结尾。
<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
backSpeed: 50,//后退速度
backDelay: 500,//后退延迟
loop:false,//是否循环 默认false
startDelay:1000,//起始时间
fadeOut:true,//淡出效果
});
</script>
效果：
更多属性看作者的完整文档
在Vue中使用
前面讲了这么多是在原生html中使用的，属性是相同的，只是使用的时候有点区别。而且该插件在vue中使用多封装了一层，使得我们不用自己去操作Dom。
在main.js中全局导入并使用
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
Vue.use(VueTypedJs)
用法
要开始使用，只需将vue-typed-js自定义元素添加到template然后传递文本，该文本应输入到strings属性。 另外，您需要将具有类typing的元素传递到插槽，它将用作wrapper 。
最简单的使用
<template>
<vue-typed-js :strings="['这是我的博客', '我是浪漫主义码农','欢迎各位大佬来访']">
<h1 class="typing"></h1>
</vue-typed-js>
</template>
<script>
export default {};
</script>
<style>
</style>
效果：
更多属性
直接在vue-typed-js自定义标签上加属性就行，全部的属性如下：
| 属性 | 类型 | 描述 | 用法 |
|---|---|---|---|
| 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'" |
最后放一个加了点样式的打字机吧
<template>
<div>
<vue-typed-js
class="mao"
:strings="[
'这是我的博客<br/>我是浪漫主义码农<br/>欢迎各位大佬来访',
'这是我的博客<br/>我是浪漫主义码农<br/>送大家一句话',
'这是我的博客<br/>我是浪漫主义码农<br/>博观而约取,厚积而薄发。<br/><h2>Romantic until death</h2>',
]"
:cursorChar="'☜'"
:typeSpeed="100"
:backSpeed="50"
:autoInsertCss="true"
>
<h1 class="typing"></h1>
</vue-typed-js>
</div>
</template>
<script>
export default {};
</script>
<style>
.mao {
position: relative;
left: 35%;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(rgb(255, 255, 0), rgb(0, 255, 255));
-webkit-text-fill-color: transparent;
}
</style>
效果：
三、写在最后
如果是在其它项目中使用的话：
在ReactJS使用参考
在Vue使用参考
用作WebComponent
typed.js作者网站：www.mattboldt.com
点个赞再走吧~~~~
标签：vue,typeSpeed,typed,前端,酷炫,js,打字机,true,strings 来源： https://www.cnblogs.com/maoqian/p/15419233.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。