心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

想实现前端酷炫的打字机一样的效果吗？

发布时间：2022-07-02 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了想实现前端酷炫的打字机一样的效果吗？，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

前言：

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

想实现前端酷炫的打字机一样的效果吗？

一、typed.js的介绍

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

如下图官方（作者）演示。

想实现前端酷炫的打字机一样的效果吗？

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

二、typed.js的使用

1. 环境准备

  1. 在原生htML中

只需要引入CDN

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

  1. 在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>

效果：

@H_41_126@

更多属性看作者的完整文档

在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 &amp;nbsp;until&nbsp; 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使用参考

查看此示例在组件中使用Typed.js的React app

在Vue使用参考

在vue中使用typed.js

用作Webcomponent

WebComponent:

typed.js作者网站：www.mattboldt.COM

想实现前端酷炫的打字机一样的效果吗？

点个赞再走吧~~~~

脚本宝典总结

以上是脚本宝典为你收集整理的想实现前端酷炫的打字机一样的效果吗？全部内容，希望文章能够帮你解决想实现前端酷炫的打字机一样的效果吗？所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：javajavascriptloadloadphppythonshuffleString安装安装文档文档程序员程序员索引索引
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程