實作酷炫的打字機效果插件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/[email protected]"></script>

在vue中

安裝依賴
npm install --save vue-typed-js

2. 使用

原生html

最簡單使用

<body>
    <span ></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        strings: ["歡迎來到我的博客", "你是最棒的"],//輸出的文字
        typeSpeed: 200,//打字的速度
  });
</script>

效果：
在這里插入圖片描述

輸入暫停

可以通過轉義字符^1000在字串中間暫停一段時間，

<body>
    <span ></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        //在了后面停頓三秒
        strings: ["讓我想一下是誰來看我了^3000", "原來是你呀老鐵"],
        typeSpeed: 200,//打字的速度
  });
</script>

智能退格

會智能回退到前一句重復的地方

<body>
    <span ></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        //會智能回退到前一句重復的地方
        strings: ["我明天想吃面條", "我明天想吃烤冷面",
        "我明天什么都想吃"],
        typeSpeed: 100,//打字的速度
  });
</script>

效果：
在這里插入圖片描述

改變游標的樣式

通過cursorChar: '_',屬性來改變游標的樣式

批量鍵入

通過轉義字符``來包括需要批量展示的資料或者文字，

會有一段文字不是通過列印出來的，而是突然完整的出現，會有一種提問打字，機器問答的感覺，

<body>
    <span ></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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/[email protected]"></script>
<script>
var typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    typeSpeed: 200,//打字的速度
  });
</script>

效果：
在這里插入圖片描述

其他常用的屬性

這里我只列舉了我用的多的，還有更多的屬性在文章結尾，

<body>
    <span ></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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 ></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類	`:fadeOut`
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
      
      :strings="[
        '這是我的博客<br/>我是浪漫主義碼農<br/>歡迎各位大佬來訪',
        '這是我的博客<br/>我是浪漫主義碼農<br/>送大家一句話',
        '這是我的博客<br/>我是浪漫主義碼農<br/>博觀而約取,厚積而薄發，<br/><h2>Romantic &nbsp;until&nbsp; death</h2>',
      ]"
      :cursorChar="'?'"
      :typeSpeed="100"
      :backSpeed="50"
      :autoInsertCss="true"
    >
      <h1 ></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

在這里插入圖片描述

點個贊再走吧~~~~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320929.html

標籤：其他

上一篇：css3新增屬性-border邊框

下一篇：web全堆疊后臺權限管理系統（VUE+ElementUi+nodeJs+koa2）

想實作前端酷炫的打字機一樣的效果嗎？

實作酷炫的打字機效果插件typed.js

一、typed.js的介紹

二、typed.js的使用

1. 環境準備

2. 使用

原生html

最簡單使用

輸入暫停

智能退格

改變游標的樣式

批量鍵入

靜態 HTML 的字串 （SEO 友好）

其他常用的屬性

在Vue中使用

在main.js中全域匯入并使用

用法

更多屬性

三、寫在最后

在ReactJS使用參考

在Vue使用參考

用作WebComponent

靜態 HTML 的字串（SEO 友好）